console
<head>
<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(() => {
var player = new Clappr.Player({
source: url,
parentId: "#player",
width: '300px',
height: '222px'
});
var video = document.getElementById('video');
var videoSrc = url;
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
}
}, 1000)
}
</script>
</body>