<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta name="referrer" content="no-referrer">
<title>xgplayer</title>
<style type="text/css">
#mse{
margin: 0 auto;
}
.container{
width: 750px;
height: auto;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div id="mse" ></div>
</div>
<script src="http://unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js" charset="utf-8"></script>
<script>
<!-- Mp4設置方式 如果想知道M3u8格式 請到下面地址 -->
// https://v2.h5player.bytedance.com/generate/
let player = new Player({
"id": "mse",
"url": "https://lizst.glendonclass.com/media/videos/mp4/248297.mp4?st=VGvkR9Mz3yv0Ci5TzWNvzw&e=1738424844",
// poster:"{{ data.v_cover }}",
/*fitVideoSize: 'auto',*/
"playsinline": true,
"whitelist": [
""
],
"autoplay": true,
"fluid": true,
el: document.querySelector('#mse'),
playbackRate: [0.5, 0.75, 1, 1.5, 2],
defaultPlaybackRate: 1.0,
rotate: { //視頻旋轉按鈕配置項
innerRotate: true, //只旋轉內部video
clockwise: false // 旋轉方向是否為順時針
},
});
player.on('rotate', function (deg) {
console.log(deg);// 旋轉時會觸發rotate事件，角度有四個值90，180，270，0
})
</script>
</body>
</html>
浙公網安備 33010602011771號