video.js的使用，打造自定义视频播放器（综合详解，可收藏）_videojs 新增按钮_就是那个_feng的博客

一、视频初始化：

而官方给出了两种初始化方案：
1、直接在viedo的HTML标签中 `<video>` 初始化,标签里面加上 `class="video-js"` 和 `data-setup='{}'` 属性，例如；

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    width="600"
    height="400"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//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
</video>
2、使用js初始化（推荐使用），例如：
 
<script>
var player = videojs(document.getElementById('myVideo'), {
  controls: true, // 是否显示控制条
  poster: 'xxx', // 视频封面图地址
  preload: 'auto',
  autoplay: false,
  fluid: true, // 自适应宽高
  language: 'zh-CN', // 设置语言
  muted: false, // 是否静音
  inactivityTimeout: false,
  controlBar: { // 设置控制条组件
    /* 设置控制条里面组件的相关属性及显示与否  */
    'currentTimeDisplay':true,
    'timeDivider':true,
    'durationDisplay':true,
    'remainingTimeDisplay':false,
    volumePanel: {
      inline: false,
    /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
    children: [
      {name: 'playToggle'}, // 播放/暂停按钮
      {name: 'currentTimeDisplay'}, // 视频当前已播放时间
      {name: 'progressControl'}, // 播放进度条
      {name: 'durationDisplay'}, // 视频播放总时间
      { // 倍数播放，可以自己设置
        name: 'playbackRateMenuButton',
        'playbackRates': [0.5, 1, 1.5, 2, 2.5]
        name: 'volumePanel', // 音量控制
        inline: false, // 不使用水平方式
      {name: 'FullscreenToggle'} // 全屏
  sources:[ // 视频来源路径
          src: '//vjs.zencdn.net/v/oceans.mp4',
          type: 'video/mp4',
          poster: '//vjs.zencdn.net/v/oceans.png'
}, function (){
  console.log('视频可以播放了',this);
</script>
温馨提示：在js中有很多配置项可以完成，使我们的的视频播放器更加完善。
  
二、关于js初始化后，ControlBar组件的相关说明：
 
playToggle 播放暂停按钮
volumeMenuButton 音量控制
currentTimeDisplay 当前播放时间
timeDivider ‘/’ 分隔符
durationDisplay 总时间
progressControl 点播流时，播放进度条，seek控制
liveDisplay 直播流时，显示LIVE
remainingTimeDisplay 当前播放时间
playbackRateMenuButton 播放速率，当前只有html5模式下才支持设置播放速率
fullscreenToggle 全屏控制 
 currentTimeDisplay,timeDivider,durationDisplay是相对于 remainingTimeDisplay的另一套组件，后者只显示当前播放时间，前者还显示总时间。若要显示成前者这种模式，即 ‘当前时间/总时间’，可以在初始化播放器选项中配置： 
var myPlayer = neplayer('my-video', {controlBar:{
    'currentTimeDisplay':true,
    'timeDivider':true,
    'durationDisplay':true,
    'remainingTimeDisplay':false
}}, function() {
    console.log('播放器初始化完成');
示例如图：
  
三、video.js样式修改
 
可在相对应的css中找到相对应的class类名下修改样式。 
.video-js 给.video-js设置字体大小以统一各浏览器样式表现，因为video.js采用的是em单位,单位可自定义。
 同时，video.js默认的播放按钮在左上角，不过我们常见的一般都在中间，比较符合习惯。我们可以通过修改参数，在<video>标签中加入vjs-big-play-centered类即可；例如： 
.video-js{ //修改字体大小
  font-size: 14px;
class="video-js vjs-big-play-centered" //修改按钮布局
.video-js .vjs-big-play-button 中间大的播放按钮
.video-js.vjs-paused .vjs-big-play-button 视频加载出错时隐藏播放按钮
.vjs-loading-spinner 加载圆圈
.video-js .vjs-control-bar 控制条默认显示
.vjs-button > .vjs-icon-placeholder:before 控制条所有图标，图标字体大小最好使用px单位，如果使用em，各浏览器表现可能会不大一样
.video-js .vjs-play-progress 进度条背景色
 常见的css修改 
1、暂停时显示播放按钮
 
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
2、播放按钮变圆形
 
.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: #73859f;
    background-color: rgba(115,133,159,.5);
    border-width: 0.15em;
    margin-top: -1.25em;
    margin-left: -1.75em;
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
/* 加载圆圈 */
.vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
[外链图片转存失败(img-5dVD2ANd-1569317395221)(https://www.awaimai.com/wp-content/uploads/2017/11/unnamed-file.png)] 
3、点击屏幕播放/暂停
 
.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
4、进度显示当前播放时间
 
video.js 默认倒序显示时间，也就是视频播放的剩余时间。
 要显示当前的播放时间，以及总共视频时长，加2行CSS解决： 
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}
5、重载视频文件
 
//html布局
<video id="example_video">
    <source id="videoMP4" src="1.mp4" />
</video>
<button id="reload">重载</button>
//js重新加载视频
var video = document.getElementById('example_video');
var source = document.getElementById('videoMP4');
$("#reload").click(function() {
    video.pause()
    source.setAttribute('src', '2.mp4');
    video.load();
    video.play();
var video = document.getElementById('example_video');
$("#reload").click(function() {
    video.pause()
    video.setAttribute('src', '2.mp4');
    video.load();
    video.play();
四、video.js在Vue中使用
 
 import Video from 'video.js'
 /* 不能直接引入js，否则会报错：videojs is not defined */ 
 import 'video.js/dist/lang/zh-CN.js' ；
 import video_zhCN from 'video.js/dist/lang/zh-CN.json'；
 import 'video.js/dist/video-js.css'；
 Video.addLanguage('zh-CN', video_zhCN); 
五、video.js 在iPhone中播放时自动全屏问题
 
 在iPhone设备上播放视频时(微信浏览器上也会有这个问题)会自动全屏，这里的全屏并不是常规的手机横屏那种全屏，而是类似于一个modal弹窗的全屏，解决办法就是在 <video>标签中添加playsinline="true"也可以简写playsinline属性，例如： 
<video
    webkit-playsinline="true"
    playsinline="true"
    class="video-js vjs-big-play-centered vjs-fluid">
</video>
<video
    webkit-playsinline
    playsinline
    class="video-js vjs-big-play-centered vjs-fluid">
</video>
六、video.js 4.9版本已经可以支持音乐标签
 
与<video>不同的是，audio标签在播放音乐时，<audio>的封面标签不会消失，其他配置均与<video>类似。
                                    videojs-contrib-hls拉流播放
主要是因为之前使用西瓜播放器插件实现hls拉流播放时，安卓手机是正常的，但是苹果一直打转，pc端的话https格式也播放不来，pc端的话去掉s改为http即可进行播放
步骤1.下载videojs-contrib-hls依赖(没有下载video.js的也下载一下这个)
npm i videojs-contrib-hls --save
npm i video.js --save
步骤2. main中引入video-js.css
import 'video.js
                                    弊端：这个项目多人合作，别人没有同步修改这个插件的话，就还是会报错，不利于项目维护，故舍弃此方案。在vue项目中使用video.js时要求中文化，但是网上的解决办法不太好找，特此记录一下。2、使用zh-CN.json即可，亲测有效。
                                    Video.js 是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一，也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染，在引入 Video.js 后，轻松解决。本教程手把手教你搭建一套基于 Vue 的 Video.js 视频播放页。
跟随本教程学习，最终你可以自己搭建一套可以播放本地视频文件及网络流媒体的网页视频播放器。学习如何修改 video.js 的默认样式来实现播放按钮自定义形状(圆形)、居中及播放时间的显示与否， 如何播放 m3u8 格式，以及如何使用 video 的属性、事件及
                                    video.js自定义控制按钮// 视频播放if (!this.player) {let that = thisthis.player = videojs("#videoPlayer", this.videoOptions, function onPlayerReady(this:any) {console.log('onPlayerReady', this);// var hdButtonEl ...
1. VIDEO JS概述
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。它支持在桌面和移动设备上播放视频。该项目于2010年年中启动，目前已有数百名贡献者，在超过45万个网站上使用
videojs官网：https://vide
                                    webpack与video.js使用注意的问题转自https://segmentfault.com/a/1190000007603266
video.js是一个优秀的视频播放器库，不过官网的示例中，是作为全局变量videojs引入的。如果我们的项目使用ES6风格的模块，用webpack来做打包的话，就需要做一些额外的工作。本文介绍我在使用的时候遇到的一些“坑”。
基本使用方法
直接从npm安装vi...
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <title>https://blog.csdn.net/qq_30282133/article/details/81566273</title>
    <!-- https://blog.csd
1.引入文件
<link rel="stylesheet" href="../cssnew/video-js.css">
<script src="../jsnew/video.min.js" type="text/javascript" charset="utf-8"></script>
注意路径！！！
2.html
<vi...
forward - 如果数字大于 0，则将添加一个搜索前进按钮，该按钮会搜索该秒数
back - 如果数字大于 0，将添加一个后退按钮来寻找该秒数
forwardIndex - 在控制栏中插入按钮的位置。 默认为1 。 请参阅下面的注释。
 backIndex - 在控制栏中插入按钮的位置。 默认为1 。 请参阅下面的注释。
forwardIndex和backIndex设置按钮在控制栏中的位置。 请注意，如果同时使用后退和前进按钮，则先插入前进按钮。
 假设标准控制栏，播放按钮位于索引0 。 两者的默认索引都为1 ，前进按钮插入播放按钮之后，然
video.js 是开源插件，据说甚至可以集合到gitbook上note: 
一个需要注意的点是下载下来的demo.html直接右键浏览器是打不开的，需要用iis或者nginx 或者beego这些服务端的玩意加载后，在前端浏览器才能看到视频页面。参考文章:
HTML5视频播放器Video.Js