Video.js自定义使用

2019独角兽企业重金招聘Python工程师标准>>>

note: 
一个需要注意的点是下载下来的demo.html直接右键浏览器是打不开的，需要用iis或者nginx 或者beego这些服务端的玩意加载后，在前端浏览器才能看到视频页面。

参考文章:

• HTML5视频播放器Video.Js的使用
• api使用
• brightcover 播放器是基于video.js内核封装的，所以它的文档也能参考
• download-video btn
• customize-appearance
• customize-appearance

直接使用

注意点：加载flash动画后，chrome ie firefox播放界面才能统一，否则各有各的界面

自定义控制条

组件结构

Player
PosterImage
TextTrackDisplay
LoadingSpinner
BigPlayButton
ControlBar
PlayToggle
FullscreenToggle
CurrentTimeDisplay
TimeDivider
DurationDisplay
RemainingTimeDisplay
ProgressControl
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl
VolumeBar
VolumeLevel
VolumeHandle
MuteToggle

使用：以添加按钮为例子

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('按钮1');
/*
做法2：dom添加
*/
var controlBar,
newElement = document.createElement('div'),
newLink = document.createElement('a'),
newImage = document.createElement('img');
// Assign id and classes to div for icon
newElement.id = 'downloadButton';
newElement.className = 'downloadStyle vjs-control';
// Assign properties to elements and assign to parents
newImage.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 array
controlBar = document.getElementsByClassName('vjs-control-bar')[0];
// Change the class name here to move the icon in the controlBar
insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];
// Insert the icon div in proper location
controlBar.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

jquery弹幕插件使用

jquery弹幕插件 github

video.js集成例子

弹幕开始/继续
    
弹幕暂停
    
显示弹幕:     
弹幕透明度:
 

当前弹幕运行时间(分秒)：  
设置当前弹幕时间(分秒)： 
设置




发弹幕:

白色
红色
绿色
蓝色
黄色


大文字
小文字


滚动
顶端
底端


发送

转载于:https://my.oschina.net/sichunchen/blog/1551502