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

本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下

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  是有相同的效果
                this.one("playing", function () {         // 监听播放
                   console.log("成功初始化视频");
                });

                this.one("error", function (error) {      // 监听错误
                    console.error("监听异常",error);
                });
            });
        }
    },

在mounted中挂载

mounted() {
    this.initVideo();
  },

然后再在beforeDestroy()中卸载,不然页面会报错,而且再次进入页面的时候,视频无法重新初始化

beforeDestroy() {
    //控制 看你页面上显示的多少个  就循环多少次销毁
    // 这儿的element  就是上面 我初始化后获取节点个数
      for (let index = 0; index < this.element; index++) {
              this.$videos(`myVideos${index}`).dispose()
      }
  },

最后给大家献上页面的布局

<div v-for="(item,i) in adminList" :key="i">
        <div class="mr30 mt10">
          <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"
          >
            <source :src="item.src" type="video/mp4" />
          </video>
        </div>
</div>

好了,到这就大功告成了,有什么问题,欢迎大家提问。
更多相关Video.js的设置请点击这里

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Js视频播放器插件Video.js使用方法详解

    Video.js快速入门 我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js <link href="video-js.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script src="video.js"

  • vue实现自定义H5视频播放器的方法步骤

    前言 前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑... 设计阶段 这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易. 需要实现的几个功能基本都标注出来了; 除了还有一个视频加载失败的...下面就这届上代码了;刚开始构思的时候考虑了一下功能的实现方式: 一是用原生的DOM操作,获取video元素后,用addEventListener来监听; 二是用vue的方式绑定事件监听; 最后图方便采

  • vue-video-player实现实时视频播放方式(监控设备-rtmp流)

    监控设备播放效果如下 1.vue项目安装vue-video-player npm install vue-video-player --save 2.编写视频播放组件(放上完整的组件例子,父组件调用时给videoSrc和playerOptions.sources[0].src赋值就可以播放了,具体操作有注释) 注:style样式部分用了lang=scss,如果自己的项目没用他请用自己的方式改一下样式部分避免报错 <template> <div class="video-js&q

  • Vue使用video标签实现视频播放

    本文项目为大家分享了Vue使用video标签实现视频播放的具体代码,供大家参考,具体内容如下 项目需求:动态显示视频滚动条.禁止视频下载.播放时每5s更新当前时长.每10分钟暂停视频显示提示. 之前做视频播放时基本都是使用 vue-video-player 组件,其原因为 封装功能齐全.播放源兼容性好等. 通过这次项目需求,也深入的学习了 video 标签的属性及方法.具体在这里跟大家分享一下. 具体使用方法如下 <template> <!-- Video组件 --> <di

  • vue视频播放暂停代码

    vue中的视频播放 vue.js中引入video视频播放器 main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video html页面 <video id="vide" class="video-js v2 ani resize" autoplay :src="视频地址" type="

  • vue-video-player视频播放器使用配置详解

    本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,具体内容如下 1.安装 npm install vue-video-player -save 2.在main.js中添加 import VueVideoPlayer from 'vue-video-player' // 视频播放器 import 'video.js/dist/video-js.css' Vue.use(VueVideoPlayer) 3.新建一个vueVideoPlayer.vue组件供调用 <

  • vue通过video.js解决m3u8视频播放格式的方法

    前言 今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看.会使用两种方法来解决这个问题 第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,

  • vue使用video.js进行视频播放功能

    关于video.js video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视频播放(可加载本地静态资源视频以及网络链接视频) 官网:videojs.com/ 安装 npm  install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 使用 <div class="demo1-vide

  • vue-dplayer 视频播放器实例代码

    官网 vue-dplayer dplayer-doc 示例 如果默认 options 中没有视频链接,之后设置视频链接时,直接通过 this.options.video.url = videoPath 是无效的 需要先获取到播放器的实例 this.$refs.player.dp ,然后通过 switchVideo() 对 url 进行修改 <template> <d-player ref="player" :options="options">

  • vue视频播放插件vue-video-player的具体使用方法

    安装 npm install vue-video-player --save 引入 可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一) [1]全局引用, 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer) [2

  • vue2.0实现音乐/视频播放进度条组件

    基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口

随机推荐