mirror of
https://github.com/bytedance/xgplayer.git
synced 2025-04-05 03:05:02 +08:00
141 lines
3.6 KiB
HTML
141 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="referrer" content="no-referrer">
|
|
<title>Document</title>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
video {
|
|
filter: saturate(100%) !important;
|
|
-webkit-filter: saturate(100%) !important;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="//unpkg.pstatp.com/xgplayer/3.0.0-alpha.110-18/dist/xgplayer.min.css"/>
|
|
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
|
|
</head>
|
|
<button id="btn" onclick="playNext()">播放下一个</button>
|
|
<body>
|
|
<section id="wrapper">
|
|
<div id="vs"></div>
|
|
</section>
|
|
<script type="module">
|
|
var vConsole = new window.VConsole();
|
|
import Player from '../../packages/xgplayer/src/index'
|
|
import Mp4Plugin from '../../packages/xgplayer-mp4/src/index'
|
|
var videoList = [
|
|
{
|
|
definition: '360p',
|
|
//keyValue: "0ff2ccbec8ab45349ae912c89056bc62",
|
|
bitrate: 311473,
|
|
vheight: 360,
|
|
vwidth: 640,
|
|
duration:90,
|
|
url: './video/360p.mp4'
|
|
},
|
|
{
|
|
definition: '480p',
|
|
//keyValue: "288e672cd2944bd0ab4aa0e03b4de438",
|
|
bitrate: 437288,
|
|
vheight: 480,
|
|
vwidth: 860,
|
|
duration:90,
|
|
url: './video/480p.mp4'
|
|
},
|
|
{
|
|
definition: '720p',
|
|
//keyValue: "d0aabcd3605c4ed8962fc6819764ec90",
|
|
bitrate: 915105,
|
|
vheight: 720,
|
|
vwidth: 1270,
|
|
duration:90,
|
|
url: './video/720p.mp4'
|
|
},
|
|
{
|
|
definition: '1080p',
|
|
//keyValue: "d0aabcd3605c4ed8962fc6819764ec90",
|
|
bitrate: 2713749,
|
|
vheight: 1080,
|
|
vwidth: 1920,
|
|
duration:90,
|
|
url: './video/1080p.mp4'
|
|
}
|
|
]
|
|
let player = new Player({
|
|
id: 'vs',
|
|
autoplay: true,
|
|
volume: 1,
|
|
url: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-720p.mp4',
|
|
poster: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg",
|
|
playsinline: true,
|
|
thumbnail: {
|
|
pic_num: 44,
|
|
width: 160,
|
|
height: 90,
|
|
col: 10,
|
|
row: 10,
|
|
// urls: ['//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-thumbnail.jpg'],
|
|
},
|
|
definition: {
|
|
defaultDefinition: '720p',
|
|
// list: videoList
|
|
},
|
|
// TestSpeed: {
|
|
// url: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-720p.mp4',
|
|
// openSpeed: true,
|
|
// loadSize: 200*1024,
|
|
// testTimeStep: 5000,
|
|
// testCnt: 3,
|
|
// },
|
|
height: window.innerHeight -300,
|
|
width: window.innerWidth,
|
|
waitingInBufferTimeOut: 5000,
|
|
//plugins: [Mp4Plugin],
|
|
|
|
// set mp4Plugin support Apple's MMS
|
|
//mp4Plugin: {
|
|
// preferMMS: true,
|
|
//}
|
|
});
|
|
window.player = player
|
|
|
|
function playNext() {
|
|
player.playNext({
|
|
vid: 'v02d02g10000cag6m4gmmdqu846g76ag123',
|
|
id: 'mse',
|
|
isLive: false,
|
|
autoplay: true,
|
|
// plugins: [Mp4Plugin],
|
|
url: './video/1080p.mp4'
|
|
})
|
|
}
|
|
window.playNext = playNext
|
|
// player.on('ended', () => {
|
|
// player.replay()
|
|
// })
|
|
player.on('pause', () => {
|
|
console.log('>>>>pause')
|
|
})
|
|
player.on('play', () => {
|
|
console.log('>>>>play')
|
|
})
|
|
player.on('seeking', () => {
|
|
console.log('>>>>seeking')
|
|
})
|
|
player.on('seeked', () => {
|
|
console.log('>>>>seeked')
|
|
})
|
|
player.usePluginHooks('replay','replayClick', () => {
|
|
console.log('>>>>replayClick')
|
|
})
|
|
</script>
|
|
<!--<script type="module" src="./index.js"></script>-->
|
|
</body>
|
|
</html>
|