video 视频播放器

[wolichuang]

html 中使用

<link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script>

<video
    id="my-player"
    class="video-js vjs-fluid"
    controls
    preload="auto"
    poster="https://vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
    <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
    <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
    <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">
        supports HTML5 video
    </a>
    </p>
</video>

var options = { fluid: true };

var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('Your player is ready!');

  // In this context, `this` is the player that was created by Video.js.
  this.play();

  // How about an event listener?
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');
  });
});

vue 中使用

// 安装
npm install video.js

// 引入video.js

import Videojs from 'video.js'

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

Vue.prototype.$video = Videojs

// 展示层
<!-- 如果有视频，不展示banner图，显示视频框 -->
      <img :src="aggregationData.BannerImage" v-show="isBanner" alt="">
      <div v-show="isVideo">
        <video
          id="myVideo"
          class="video-js vjs-big-play-centered vjs-fluid"
          controls
          preload="auto"
          width="100%"
          height="100%"
          :poster="aggregationData.BannerImage"
        >
        <source
            type="video/mp4"
            :src="aggregationData.BannerVideo"
        >
        </video>
</div>

initVideo() {   //此处初始化的调用，我放在了获取数据之后的方法内，而不是放在钩子函数mounted
        //页面dom元素渲染完毕，执行回调里面的方法
      this.$nextTick(() => {
          let myPlayer = this.$video(document.getElementById('myVideo'), {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: false,
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            // width: "800px",
            //设置视频播放器的显示高度（以像素为单位）
            // height: "400px",
            controlBar:{
              playToggle:true
            }
          }); 
        })