需求:
仿照西瓜视频写一个视频播放和上一集下一集的按钮功能
回答:
先访问官网:
这是西瓜视频的官网,
点击官网的示例按钮,可以看到相关的视频示例以及相关的代码,
我们复制下来代码,然后添加按钮和切换视频的方法,
完整代码:
javascript
<!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>播放器</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: auto;
overflow: hidden;
}
body {
/* display: flex; */
}
#mse {
flex: auto;
width: 889px !important;
height: 500px !important;
margin-bottom: 20px !important;
}
</style>
<script type="text/javascript">
window.addEventListener("resize", function () {
document.getElementById("mse").style.height = window.innerHeight + "px";
});
</script>
</head>
<body>
<div id="mse"></div>
<button onclick="playBack()">上一集</button>
<button onclick="playNext()">下一集</button>
<script
src="https://unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js"
charset="utf-8"
></script>
<script type="text/javascript">
// 设置视频数组
let videoArr = [
"https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
"https://player.caixin.com/video/2021/2/7/2021271612673141018_116_4222.mp4",
"https://vd2.bdstatic.com/mda-pkveyt87ccdibcj6/sc/cae_h264/1701483084537162496/mda-pkveyt87ccdibcj6.mp4?v_from_s=hkapp-haokan-hbf&auth_key=1704261123-0-0-6e2f86b0c57691e183c7501e2cf89640&bcevod_channel=searchbox_feed&cr=2&cd=0&pd=1&pt=3&logid=3123035774&vid=10328216808716942050&klogid=3123035774&abtest=",
"https://vd4.bdstatic.com/mda-qa1mniexb3f7r1dj/720p/h264/1704208673349687591/mda-qa1mniexb3f7r1dj.mp4?v_from_s=hkapp-haokan-hbf&auth_key=1704261202-0-0-1df311398200508f9b181ab9b343b5dd&bcevod_channel=searchbox_feed&pd=1&cr=2&cd=0&pt=3&logid=3202891224&vid=1343133119504452132&klogid=3202891224&abtest=",
];
let player = new Player({
id: "mse",
autoplay: true,
volume: 0.3,
url: "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
poster:
"https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
playsinline: true,
thumbnail: {
pic_num: 44,
width: 160,
height: 90,
col: 10,
row: 10,
urls: [
"https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg",
],
},
danmu: {
comments: [
{
duration: 15000,
id: "1",
start: 3000,
txt: "长弹幕长弹幕长弹幕长弹幕长弹幕",
style: {
//弹幕自定义样式
color: "#ff9500",
fontSize: "20px",
border: "solid 1px #ff9500",
borderRadius: "50px",
padding: "5px 11px",
backgroundColor: "rgba(255, 255, 255, 0.1)",
},
},
],
area: {
start: 0,
end: 1,
},
},
height: window.innerHeight,
width: window.innerWidth,
whitelist: [""],
});
player.emit("resourceReady", [
{
name: "超清",
url: "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
},
{
name: "高清",
url: "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4",
},
{
name: "标清",
url: "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
},
]);
let currentIndex = 0;
function playNext() {
currentIndex++;
if (currentIndex >= videoArr.length) {
currentIndex = 0; // 如果已经是最后一个视频，则切换到第一个视频
}
let nextVideoUrl = videoArr[currentIndex];
player.src = nextVideoUrl;
// player.src = "https://player.caixin.com/video/2021/2/7/2021271612673141018_116_4222.mp4";
player.play();
}
function playBack() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = videoArr.length - 1; // 如果已经是第一个视频,切换到最后一个视频
}
let backVideoUrl = videoArr[currentIndex];
player.src = backVideoUrl;
// player.src = "https://player.caixin.com/video/2021/2/7/2021271612673141018_116_4222.mp4";
player.play();
}
player.on("ended", function () {
playNext();
});
</script>
</body>
</html>这样就实现了一个简单的视频切换功能