vue视频循环播放

最新推荐文章于 2025-03-26 20:03:31 发布

种在地里的菜

最新推荐文章于 2025-03-26 20:03:31 发布

阅读量517

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_70953528/article/details/141854935

版权

1.引入视频插件

npm install --save vue-video-player@5.0.2

2.在页面引入组件

import { videoPlayer } from "vue-video-player";
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
components: {
   videoPlayer,
},

3.使用

<videoPlayer class="vjs-custom-skin videoPlayer" ref="videoPlayer" :playsinline="true"
                :options="playerOptions" customEventName="changed" @ended="onPlayerEnded($event)">
</videoPlayer>

playerOptions: {
    language: "zh-CN",
    muted: false,// 默认情况下将会消除任何音频
    autoplay: true,// 如果true,浏览器准备好时开始回放。            
    controls: true, //不显示暂停、声音、进度条组件            
    loop: false, // 视频一结束就重新开始。            
    controlBar: {
         remainingTimeDisplay: true, // 是否显示剩余时间功能           
    },                        
    sources: [            
         {           
            type: "video/mp4",            
            src: "视频url"            
          },          
    ],          
},     
videoList: [], //存放视频
bgcIndex: 0, //第几个视频


//
onPlayerEnded() {
    let idx = null
    if (this.bgcIndex + 1 < this.videoList.length) {        
        idx = this.bgcIndex + 1        
    } else {        
        idx = 0       
    }        
    this.getStyle(idx)       
},        

getStyle(index) {
   this.bgcIndex = index
   setTimeout(() => {
       this.playerOptions.sources[0].src = this.videoList[index].videoUrl
       this.$refs.videoPlayer.player.load();
   }, 100)
 },