SOURCE

console 命令行工具 X clear

                    
>
console
<head>
	<!-- <script type="text/javascript" src="https://raw.githubusercontent.com/clappr/clappr/dev/dist/clappr.js"></script> -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/clappr/0.4.7/clappr.min.js" integrity="sha512-2zopyYvTU8Qli4SRNk9zI5IxsvN7Tz0HQ2OZB16asyqh3y/jZa06jMb2ZCvE+zLfSRkIC+KfV2nceib5bpPSfQ=="
	 crossorigin="anonymous" referrerpolicy="no-referrer">

	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.1.5/hls.min.js" crossorigin="anonymous" referrerpolicy="no-referrer">

	</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.14.6/vconsole.min.js" integrity="sha512-e1UNzF1YxFbLreNy3AItL64xpG9hXr8NY46TrWFmB3QAnAwbxi/AuStNch65RnQsm/iT62fvBbKnkqaW0xprXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<style>
	.video-box {
		width: 400px;
		height: 225px;
		background: pink;
	}

	video {
		height: 100%;
		width: 100%;
	}
</style>

<body>
	<input id="srcInput" type="text"> <button onclick="generate()">生成</button>
    <section></section>
	<script>
         var vConsole = new window.VConsole();
    const params = window.location.search.replace('?','').split("&")
    if(params[0].includes('src')){
        document.querySelector('#srcInput').value = params[0].split('=')[1]
    }
    function generate() {
      const url = document.querySelector('#srcInput').value
      document.querySelector('section').innerHTML = `
            <h1>Clappr</h1>
	        <div id="player"></div>
            <h1>原生</h1>
            <div class="video-box">
		    <video controls src="${url}"></video>
	        </div>
            <h1>hls</h1>
            <div class="video-box">
		        <video id="video" controls ></video>
	        </div>
            `
      setTimeout(() => {
        //clapper
        var player = new Clappr.Player({
          source: url,
          parentId: "#player",
          width: '300px',
          height: '222px'
        });
        //hls
        var video = document.getElementById('video');
        var videoSrc = url;
        if (Hls.isSupported()) {
          var hls = new Hls();
          hls.loadSource(videoSrc);
          hls.attachMedia(video);
        }
      }, 1000)
    }
	</script>
</body>