vue项目中引入video.js视频播放器

深藏阁楼爱情的钟 2023-01-17 07:33 114阅读 0赞

vue项目中引入video.js视频播放器  
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

1.  安装 ： npm install video.js
2.  在main.js中引入video.js

import Video from 'video.js'
    import 'video.js/dist/video-js.css'
    Vue.prototype.$video = Video

在某个.vue页面使用

<template>
      <div>
        <div class="test_two_box">
          <video id="myVideo" class="video-js">
            <source src="http://192.168.234.116:8110/Video/小白菜.mp4" type="video/mp4" />
          </video>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      mounted() {
        let myPlayer = this.$video(myVideo, {
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          poster: 'http://192.168.234.116:8110//Picture/position/banner.jpg', //封面
          //自动播放属性,muted:静音播放
          // autoplay: "muted",
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          width: "300px",
          //设置视频播放器的显示高度（以像素为单位）
          height: "180px"
        });
      }, 
    }

***注：项目实际应用如下：***

<template>
      <div>
          ... 
          <div class="test_two_box">
            <video id="myVideo" class="video-js">
              <source :src="videoUrl" type="video/mp4" />
            </video>
          </div>
          ...
        </div>
      </div>
    </template>
    
    <script>
    import { GetVideoFile } from '@/apis/apis'
    export default {
      data() {
        return {
          videoUrl: '',
        }
      },
      created() {
        this.GetVideo();
      },
      mounted() {
        // let myPlayer = this.$video(myVideo, {
        //   //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        //   controls: true,
        //   poster: this.baseUrl + '/Picture/position/banner.jpg',
        //   //自动播放属性,muted:静音播放
        //   // autoplay: "muted",
        //   //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        //   preload: "auto",
        //   //设置视频播放器的显示宽度（以像素为单位）
        //   width: "300px",
        //   //设置视频播放器的显示高度（以像素为单位）
        //   height: "180px"
        // });
      },
      methods: {
        GetVideo() {
          GetVideoFile().then(res => {
            this.videoUrl = res.CountyUrl
            this.$nextTick(() => {
              let myPlayer = this.$video(myVideo, {
                controls: true,
                poster:res.CountyCoverUrl,//封面
                autoplay: false,
                preload: false,
                width: "350px",
                height: "180px"
              });
            })
          })
        },
      }
    };
    </script>