##修改内容
打开sandbox中的demo.html可以直接使用
或者在线访问
所有的样式都是在src/css/custom中进行补充修改的;
由于最开始是在一个gaiamount中开始修改的,所以在样式中都有一个class叫做gaia
###增加了在播放视频格式错误的时候调用flash播放器,改功能主要是在chrome上播放MPG4-VISUAL格式的视频时出现
player.js 2240
//判断当前是否使用的flash播放,如果不是,那么尝试使用flash
if(this.techName_.toLowerCase() !== 'flash'){
this.loadTech_('Flash', null);
this.techCall_('reset');
return this;
}
###增加了在没有url地址的时候提示视频正在转码中...
control-bar/play-resolutions.js
var message = '没有播放地址';
if(videos[idx]){
message = videos[idx].errorMessage || '视频正在转码中,暂时不能播放...';
}
### 移除`bigPlayButton`
使用自定义的控制条作为播放控制器。
- player.js
```javascript
children: [
'mediaLoader',
'posterImage',
'textTrackDisplay',
'loadingSpinner',
//'bigPlayButton',
'controlBar',
'errorDisplay',
'textTrackSettings'
],
```
.video-js.show-control .vjs-control-bar{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
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 Playback Not Supported
增加class show-control,将vjs-control-bar display属性设置为flex.
###time-control
将时间修改为00：00
//remaining-time-display
let time = (this.player_.scrubbing()) ? this.player_.getCache().currentTime : this.player_.currentTime();
let formattedTime = formatTime(time, this.player_.duration());
let formattedTime1 = formatTime(this.player_.duration());
this.contentEl_.innerHTML = `${localizedText}${formattedTime} | ${formattedTime1}`;
###分辨率选择
增加分辨率选择组件，play-resolutions.js
调用方式：
vid1 = videojs('vid1',{
controlBar: {
volumeMenuButton: {
inline: false,
vertical: true
},
PlayResolutions:{
idx:2, //默认使用分辨率序号，videos序号 0开始
videos:[
{
name:'2K',
src:'./m3u8/2K.m3u8',
type: 'application/vnd.apple.mpegurl'
},
{
name:'1080p',
src:'./m3u8/1080.m3u8',
type: 'application/vnd.apple.mpegurl'
},
{
name:'720p',
src:'./m3u8/720.m3u8',
type: 'application/vnd.apple.mpegurl'
},
{
name:'480p',
src:'./m3u8/480.m3u8',
type: 'application/vnd.apple.mpegurl'
}
]
}
}
});
###长宽比选择
增加长宽比选择组件，play-ratio.js
PlayerRatio:{
idx:1,
ratios:[
{
name:'16:9',
width:'860',
height:'483'
},
{
name:'4:3',
width:'860',
height:'645'
}
]
}
###logo
在toolbar中增加logo logo-text.js
LogoText:{
click:function(){
console.log('this is logo');
}
}
click点击调用函数。
.video-js.gaia .vjs-logo-control:before{
border-left: 1px solid #666;
border-right: none;
content: '';
background: url("/favicon.ico") center center no-repeat;
display: inline-block;
width: 66px;
height: 50px;
}
默认使用favicon图标
###关于hls aes加密下的一个坑
if (error || !request.response || request.response.byteLength !== 16) {
key.retries = key.retries || 0;
key.retries++;
if (!request.aborted) {
// try fetching again
self.fetchKey_(segment);
}
return;
}
注意，如果请求的是一个文件，并且该文件是被IDE进行了修改的。有一些IDE会在文件后面加一个换行符。这回导致这里判断失败。