之前的一个项目，需要做直播流，以及录播的视频播放，包括pc端和手机端。
video.js 版本号7.4.1
1.rtmp问题
要做直播流，刚开始使用的是rtmp格式，但是rtmp是基于falsh的。考虑在chrome最新的版本中，已经不支持falsh，再加上手机端不支持flash，所以最后使用m3u8格式的直播流。
基础使用
<div onClick={this.palyByIos.bind(this)} style={{cursor: 'pointer'}}>
<video id="myVideo" className="video-js vjs-default-skin vjs-big-play-centered" controls autoPlay="autoplay" playsInline preload="auto" data-setup='{}' style={{width: '100%', height: '300px'}}>
<source id="source" src={this.props.video.get('m3u8_lsd_url')} type="application/x-mpegURL"></source>
</video>
</div>
window.myVideo = window.videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false
})
window.myVideo.play()
我是再react中使用，所以写法有点不一样。
2.自动全屏问题
在ios设置中，视频播放会自动全屏。
解决办法：给video添加playsInline属性，同时设置display。
$("#myVideo video").css('display', 'initial')
3.currenTime问题
设置播放时间，使用currentTime,在pc上没有问题，但是在手机上设置，会重头开始播放。
解决办法：使用loadedmetadata事件（表示资源加载完成），但是依然有问题，经过测试，设置一个事件的延迟，可以解决。
window.myVideo.on('loadedmetadata', function() {
window.myVideo.play()
setTimeout(()=> {
window.myVideo.currentTime(ctime)
},2000)
})
4.播放按钮无效问题
还是ios设备，控制条左下角的播放按钮无效
解决办法：给video添加一个div，给div添加一个事情，通过点击事件的代理来处理播放。
palyByIos() {
if(window.myVideo.paused()) {
window.myVideo.play()
}else {
window.myVideo.pause()
}
}
5.切换清晰度问题
var videoPanelMenu = $('.vjs-fullscreen-control')
videoPanelMenu.before('<div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button" aria-live="polite" aria-expanded="false" aria-haspopup="true">'
+ '<div class="vjs-menu" role="presentation">'
+ '<ul class="vjs-menu-content" role="menu">'
+ '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="1" οnclick="changeVideo(1)">流畅</li>'
+ '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="2" οnclick="changeVideo(2)">标清</li>'
+ '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="3" οnclick="changeVideo(3)">高清</li>'
+ '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="3" οnclick="changeVideo(4)">超清</li>'
+ '</ul></div>'
+' <button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">'
+' <span aria-hidden="true" class="vjs-icon-placeholder" type="qxd"></span><span class="vjs-control-text">清晰度切换</span>'
+' </button>'
+'</div>'
);
$('.vjs-menu-item').on('click', (e)=> {
e.stopPropagation()
let status = e.target.getAttribute('type')
var ctime= window.myVideo.currentTime();
let src = ''
switch(status) {
case '1':
src = this.props.video.get('m3u8_lld_url')
break;
case '2':
src = this.props.video.get('m3u8_lsd_url')
// window.videojs("liveVideo").src([{type: "application/x-mpegURL", src: this.props.video.get('m3u8_lsd_url')}]);
// window.videojs("liveVideo").play();
break;
case '3':
src = this.props.video.get('m3u8_lhd_url')
// window.videojs("liveVideo").src([{type: "application/x-mpegURL", src: this.props.video.get('m3u8_lhd_url')}]);
// window.videojs("liveVideo").play();
break;
case '4':
src = this.props.video.get('m3u8_lud_url')
// window.videojs("liveVideo").src([{type: "application/x-mpegURL", src: this.props.video.get('m3u8_lud_url')}]);
// window.videojs("liveVideo").play();
break;
}
window.myVideo.reset()
window.myVideo.src({type: 'application/x-mpegURL', src})
window.myVideo.load(src);
window.myVideo.on('loadedmetadata', function() {
window.myVideo.play()
setTimeout(()=> {
window.myVideo.currentTime(ctime)
},2000)
})
切换清晰度可以跟设置时间一起使用。
还是ios，在ios上切换清晰度的点击没有效果
解决方法： 在代理事件上做判断，并手动设置清晰度的显示隐藏。
palyByIos(e) {
if(e.target.getAttribute('type')=== 'qxd') {
$('.vjs-menu').css('display', 'block')
setTimeout(()=> {
$('.vjs-menu').css('display', 'none')
},2000)
return
}
if(window.myVideo.paused()) {
window.myVideo.play()
}else {
window.myVideo.pause()
}
}
这些类名，都是video.js 控制条里面自动生成的固定元素，可以通过F12查看。
