video.js视频播放

video.js视频播放

npm引入：

npm i video.js

引入：

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

html：

<video
            ref="myVideo"
            class="video-js" style="width: 100%;height:100%">
            <source
              src="videoUrl"
              type="video/mp4">
          </video>

新建实例：

this.myPlayer = new Video(this.$refs.myVideo, {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        // 自动播放属性,muted:静音播放
        autoplay: 'muted',
        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',
        // 设置视频播放器的显示宽度（以像素为单位）
        width: '800px',
        // 设置视频播放器的显示高度（以像素为单位）
        height: '400px'
      })

切换数据源：

myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.play();

　　

 

钻研不易，转载请注明出处。。。。。。