no-framework-video-player
Version:
A no framework video player.you can use it as long as your program is in javascript environment
82 lines (75 loc) • 2.23 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" href="../dist/assets/index.5254f634.css"> -->
</head>
<body>
<div id="app">
</div>
<button onclick="clickFn()">切换m3u8视频源</button>
<script type="module">
import VideoPlayer from '../dist/videocomponent.es.js';
const videoPlayer = new VideoPlayer({
target: document.getElementById('app'),
props: {
autoPlay: true,
loadingType: 'ths',
loadingText: '',
src: 'https://ll-sycdn.kuwo.cn/3b0be333a396ef2f4b30b0ae1e51d140/63b4271a/resource/m2/46/19/2466976772.mp4',
},
})
videoPlayer.$on('loadstart', (data) => {
console.log(data)
console.log('loadstart')
})
videoPlayer.$on('durationchange', (data) => {
console.log(data)
console.log('durationchange')
})
videoPlayer.$on('loadedmetadata', (data) => {
console.log(data)
console.log('loadedmetadata')
})
videoPlayer.$on('loadeddata', (data) => {
console.log(data)
console.log('loadeddata')
})
videoPlayer.$on('progress', () => {
// console.log('progress')
})
videoPlayer.$on('canplay', () => {
console.log('canplays')
})
videoPlayer.$on('canplaythrough', () => {
console.log('canplaythrough')
})
videoPlayer.$on('play', () => {
console.log('play')
})
videoPlayer.$on('playing', () => {
console.log('playing')
})
videoPlayer.$on('timeupdate', ({ detail }) => {
// console.log(detail)
})
window.clickFn = () => {
videoPlayer.$$set({
type: 'm3u8',
controlBtns: [
'progress',
'progressTime',
'speedRate',
'volume',
'setting',
'pip',
'pageFullScreen',
'fullScreen',
],
src: 'https://apd-65f952198b079d44ae6259b57f149420.v.smtcdns.com/mv.music.tc.qq.com/Agxi661cQ4dgUk-YYtb57kQOV8qAfhzk9PkGL63aI2Ww/B31668EF2AF834F7B39B8C23AF46A9E333AF1EEB77436A8323B92B4761AC524A14D71B884B41ED1E42D708A610FD2A9EZZqqmusic_default/qmmv_0b53q4aaoaaapeaagbl6yvrvjbyaa6dqab2a.f9944.m3u8'
})
}
</script>
</body>
</html>