VideoJS视频播放器常用参数说明和示例代码

前端开发

VideoJS视频播放示例代码

网上大量搬运内容很多已经过期失效了,今天做了一个demo引用的最新的videojs版本,完全能跑得起来,相比默认的播放器做了些改变,而且加了视频上的覆盖层做水印,水印插件用的是这个,可以用文字png图片两种方式做视频水印,主要做了以下改变:

  • 播放按钮放到了中间位置
  • 控制栏的一些样式变化
  • 集合了常用的控制按钮:播放进度:当前时间/总时间、声音大小、播放速度、画中画、全屏等
  • 屏蔽了视频播放区的右键功能,禁止另存视频

videojs目前支持两种方法来配置参数,一是和vuejs那样在html的video标签中加入属性来实现,二是最常见的javascripe来配置,因人而异吧,对于JavaScript不熟悉的同学来说在html中配置显然更友好,但是为了dom代码的简洁性个人更喜欢用js来配置,下面是示例文件代码

<!doctype html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
  <!-- CSS -->
  <link href="plugins/watermark/title.css" rel="stylesheet">

  <!-- JS -->

  <style type="text/css">
  /*
  .video-js .vjs-time-control {
      display: block;
  }
  .video-js .vjs-remaining-time {
      display: none;
  } 
  */   

  .video-js .vjs-big-play-button {
      left: 50% !important;
      top: 50% !important;
      /*
      width: 20%;
      height: 20%;
      */
  }

  .video-js .vjs-play-control:before {

  }  

  .video-js{ /* 给.video-js设置字体大小以统一各浏览器样式表现,因为video.js采用的是em单位 */
    font-size: 14px;
  }
  .video-js button{
    outline: none;
  }
  .video-js.vjs-fluid,
  .video-js.vjs-16-9,
  .video-js.vjs-4-3{ /* 视频占满容器高度 */
    height: 100%;
    background-color: #161616;
  }
  .vjs-poster{
    background-color: #161616;
  }
  .video-js .vjs-big-play-button{ /* 中间大的播放按钮 */
    font-size: 2.5em;
    line-height: 2.3em;
    height: 2.5em;
    width: 2.5em;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background-color: rgba(115,133,159,.5);
    border-width: 0.12em;
    margin-top: -1.25em;
    margin-left: -1.75em;
    border-color: #ffb845 !important; /*暂停按钮颜色*/
  }
  .vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before{
    color: #ffb845 !important;  /*暂停按钮颜色*/
  }
  .video-js.vjs-paused .vjs-big-play-button{ /* 视频暂停时显示播放按钮 */
    display: block;
  }
  .video-js.vjs-error .vjs-big-play-button{ /* 视频加载出错时隐藏播放按钮 */
    display: none;
  }
  .vjs-loading-spinner { /* 加载圆圈 */
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
  }
  .video-js .vjs-control-bar{ /* 控制条默认显示 */
    display: flex;
  }
  .video-js .vjs-time-control{display:block;}
  .video-js .vjs-remaining-time{display: none;}

  .vjs-button > .vjs-icon-placeholder:before{ /* 控制条所有图标,图标字体大小最好使用px单位,如果使用em,各浏览器表现可能会不大一样 */
    font-size: 22px;
    line-height: 1.9;
  }
  .video-js .vjs-playback-rate .vjs-playback-rate-value{
    line-height: 2.4;
    font-size: 18px;
  }
  /* 进度条背景色 */
  .video-js .vjs-play-progress{
    color: #ffb845;
    background-color: #ffb845;
  }
  .video-js .vjs-progress-control .vjs-mouse-display{
    /*background-color: #ffb845;*/
    background-color: #FF0000;
  }
  .vjs-mouse-display .vjs-time-tooltip{
    padding-bottom: 6px;
    background-color: #ffb845;
  }
  .video-js .vjs-play-progress .vjs-time-tooltip{
    display: none!important;
  }
  </style>
</head>

<body>
  <!--
    controls
    preload="auto"
    width="640"
    height="auto"
    poster="demo.jpg"
    data-setup="{}"
    playsinline="true"
    -->    
  <video
    id="myVideo"
    class="video-js"
  >
    <!--
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
  -->
    <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>

  <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
  <script src='plugins/watermark/ITMAN_title.js'></script>    
  <script type="text/javascript">
    //const player = videojs('myVideo');
    var player = videojs(document.getElementById('myVideo'), {
      controls: true, // 是否显示控制条
      poster: 'http://vjs.zencdn.net/v/oceans.png', // 视频封面图地址
      preload: 'auto',
      autoplay: false,
      fluid: true, // 自适应宽高
      language: 'zh-CN', // 设置语言
      muted: false, // 是否静音
      inactivityTimeout: false, //自动隐藏控制栏
      playbackRates: [0.5, 1, 1.5, 2],  //播放速度
      playsinline: true,  //解决在iPhone中播放时自动全屏问题
      controlBar: { // 设置控制条组件
        /* 设置控制条里面组件的相关属性及显示与否  */
        /*
        'currentTimeDisplay':true,
        'timeDivider':true,
        'durationDisplay':true,
        'remainingTimeDisplay':true,
        volumePanel: {
          inline: true,
        },
        */
        /* 使用children的形式可以控制每一个控件的位置,以及显示与否 */
        children: [
          {name: 'playToggle'}, // 播放/暂停按钮
          {name: 'currentTimeDisplay'}, // 视频当前已播放时间
          {name: 'progressControl'}, // 播放进度条
          {name: 'durationDisplay'}, // 视频播放总时间
          { 
            name: 'PlaybackRateMenuButton', // 倍数播放,可以自己设置
          },
          {
            name: 'volumePanel', // 音量控制
            inline: false, // 不使用水平方式
          },
          {
            name: 'pictureInPictureToggle'  //画中画
          },          
          {
            name: ''
          },
          {
            name: 'FullscreenToggle' // 全屏
          },
        ]
      },
      sources:[ // 视频来源路径
          {
              src: 'http://vjs.zencdn.net/v/oceans.mp4',
              type: 'video/mp4',
              poster: 'http://vjs.zencdn.net/v/oceans.png'
          }
      ]
    }, function (){
      console.log('视频可以播放了',this);
    });

     player.ITMAN_title({
      //file:"路徑/浮水印圖片",
        text: '恒馨博客',
        opacity: 0.6,
        url:"https://www.sipmv.com"
    });

     const noContext = document.getElementById('myVideo');
      noContext.addEventListener('contextmenu', e => {
        e.preventDefault();
    });
  </script>
</body>
</html>

Post Comment