首页 > 专利学习

vue+video.js实现视频播放列表

本⽂实例为⼤家分享了vue+video.js实现视频播放列表的具体代码，供⼤家参考，具体内容如下

1.引⼊Video.js

npm install --save-dev video.js

石英陶瓷辊

然后在main.js中引⽤

import Video from 'video.js'

import 'video.js/dist/video-js.css'

Vue.prototype.$videos = Video

引⽤完成后我们就可以做视频列表了

2.在页⾯中使⽤

method中定义初始⽅法

initVideo(){

let elementList=document.querySelectorAll(".video-js");

this.element=elementList.length; //videojs 数量赋值

for (let index = 0; index < elementList.length; index++) {

let id=elementList[index].getAttribute('id');

this.$videos(id, {

autoplay: false, //⾃动播放

// muted:false, // 是否静⾳,

controls: true,//控制条

// techOrder: ['html5','flash'],//设置flash播放

language: "en",// 初始化语⾔

preload: "auto",// 预加载

width:'400',

height:'200',

// 倍速播放

playbackRates: [0.5, 1, 1.5, 2],

}, function () {

this.volume(0);

//这个地⽅很重要,⼀旦你的muted 不起作⽤，就⼀定要在设置当前的视频回调中设置声⾳为0

//this.play(); //这个地⽅也⼀样，此⽅法this.play()==autoplay 是有相同的效果

<("playing", function () { // 监听播放

console.log("成功初始化视频");

带});

磁卡读卡器<("error", function (error) { // 监听错误

<("监听异常",error);

});

}

在mounted中挂载

mounted() {

this.initVideo();

然后再在beforeDestroy（）中卸载，不然页⾯会报错，⽽且再次进⼊页⾯的时候，视频⽆法重新初始化beforeDestroy() {

结构光三维扫描仪//控制看你页⾯上显⽰的多少个就循环多少次销毁

// 这⼉的element 就是上⾯我初始化后获取节点个数

for (let index = 0; index < this.element; index++) {

this.$videos(`myVideos${index}`).dispose()

}

洗手粉},

最后给⼤家献上页⾯的布局

受体激动剂

<span class="link-color fontExtraLarge">{{i+1}}、{{item.title}}</span>

<video

ref='video'

:id="'myVideos'+i"

class="video-js vjs-default-skin vjs-big-play-centered mt10"

</video>

</div>

好了，到这就⼤功告成了，有什么问题，欢迎⼤家提问。

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

本文发布于:2024-09-22 12:54:10，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/1/194335.html

上一篇：Dreamweaver网页设计题库全(有答案)

下一篇：网页制作技术期末综合习题

标签：视频欢迎设置播放列表希望有所帮助

留言与评论（共有 0 条评论）