note:
一个需要注意的点是下载下来的demo.html直接右键浏览器是打不开的，需要用iis或者nginx 或者beego这些服务端的玩意加载后，在前端浏览器才能看到视频页面。参考文章:
- brightcover 播放器是基于video.js内核封装的，所以它的文档也能参考
直接使用
注意点：加载flash动画后，chrome ie firefox播放界面才能统一，否则各有各的界面
无标题文档
自定义控制条
组件结构
PlayerPosterImageTextTrackDisplayLoadingSpinnerBigPlayButtonControlBarPlayToggleFullscreenToggleCurrentTimeDisplayTimeDividerDurationDisplayRemainingTimeDisplayProgressControlSeekBarLoadProgressBarPlayProgressBarSeekHandleVolumeControlVolumeBarVolumeLevelVolumeHandleMuteToggle
使用：以添加按钮为例子
var player = videojs("example_video", {"controls": true,"autoplay": false,"preload": "auto","loop": false,controlBar: {captionsButton: false,chaptersButton: false,playbackRateMenuButton: true,LiveDisplay: true,subtitlesButton: false,remainingTimeDisplay: true,progressControl: true,volumeMenuButton: {inline: false,vertical: true},//竖着的音量条fullscreenToggle: true}}, function () {/*次处用于自定义控制条等*//*做法1：直接append添加*/$(".vjs-control-bar").append('');/*做法2：dom添加*/var controlBar,newElement = document.createElement('div'),newLink = document.createElement('a'),newImage = document.createElement('img');// Assign id and classes to div for iconnewElement.id = 'downloadButton';newElement.className = 'downloadStyle vjs-control';// Assign properties to elements and assign to parentsnewImage.setAttribute('src','http://solutions.brightcove.com/bcls/brightcove-player/download-video/file-download.png');newLink.setAttribute('href','http://www.baidu.com');newLink.appendChild(newImage);newElement.appendChild(newLink);// Get control bar and insert before elements// Remember that getElementsByClassName() returns an arraycontrolBar = document.getElementsByClassName('vjs-control-bar')[0];// Change the class name here to move the icon in the controlBarinsertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];// Insert the icon div in proper locationcontrolBar.insertBefore(newElement,insertBeforeNode);//controlBar.appendChild(newElement);/*做法3：简化2的写法*/var newbtn = document.createElement('btn');newbtn.innerHTML = '';var controlBar = document.getElementsByClassName('vjs-control-bar')[0];insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];controlBar.insertBefore(newbtn,insertBeforeNode);}); 自定义控制条完整例子：
自定义样式：
video.js 采用flex布局，所以float这种不起作用
如果想要使用float,需要修改默认的video.js.css
并且后面的按钮都要进行样式调整
.vjs-has-started .vjs-control-bar {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;/*原为flex*/display: block;visibility: visible;opacity: 1;-webkit-transition: visibility 0.1s, opacity 0.1s;-moz-transition: visibility 0.1s, opacity 0.1s;-o-transition: visibility 0.1s, opacity 0.1s;transition: visibility 0.1s, opacity 0.1s;}……省略无关部分.video-js .vjs-play-control {/*增加float*/float:left;cursor: pointer;-webkit-box-flex: none;-moz-box-flex: none;-webkit-flex: none;-ms-flex: none;flex: none;}.video-js .vjs-fullscreen-control {cursor: pointer;-webkit-box-flex: none;-moz-box-flex: none;-webkit-flex: none;-ms-flex: none;flex: none;/*增加float*/float: right;} 弹幕
使用开源jquery.danmu.js
video.js集成例子
RtmpPlayerTest 显示弹幕: 弹幕透明度: 当前弹幕运行时间(分秒)： 设置当前弹幕时间(分秒)： 发弹幕: