vue视频播放器
<template>
<video-player
v-for="(item, index) in playerOptions"
:key="index"
class="video-player vjs-custom-skin"
style="width: 320px; display: inline-block; margin-right: 10px"
ref="videoPlayer"
:playsinline="true"
:options="item"
@play="onPlayerPlay($event, index)"
></video-player>
</template>
<script>
export default {
name: "test",
data() {
return {
videoList: [
"/big_buck_bunny.mp4",
"http:///example/html5/mov_bbb.mp4"
],
playerOptions: []
};
},
mounted() {
this.getInfo();
},
methods: {
getInfo() {
this.$get("/charityTaskRecord/getTaskRecordById", {
id: this.$route.query.id,
}).then((res) => {
if (res.code == "200") {
this.formItem = res.data;
let content = document.getElementById("content");
content.innerHTML = res.data.instruction;
for (var i = 0; i < this.videoList.length; i++) {
let arrs = {
playbackRates: [0.5, 1.0, 1.5, 2.0],
autoplay: false,
muted: false,
loop: false,
preload: "auto",
language: "zh-CN",
aspectRatio: "16:9",
fluid: true,
sources: [
{
type: "video/mp4",
// type: "application/x-mpegURL",
src: this.videoList[i], // url地址
withCredentials: false,
},
],
poster: "", // 封面地址
height: 100 + "px",
notSupportedMessage: "此视频暂无法播放，请稍后再试",
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true,
},
};
this.playerOptions.push(arrs);
}
}
});
},
// 控制其他视频暂停
onPlayerPlay(player, index) {
var that = this.$refs.videoPlayer;
for( var i = 0;i < that.length; i++) {
if( i !=index) {
that[i].player.pause();
}
}
}
},
};
</script>