播放h5视频,通常选用ckplayer和videojs
支持是没问题的,就是注意,下发header要符合规范
测试mp4和m3u8(或加密)均可正常。
比如,php下发
header("Cache-Control: public, must-revalidate");
header("Content-Type: application/vnd.apple.mpegurl"); //m3u8
header("Content-Type: video/mp2t"); //ts
header("Content-Type: video/mp4"); //mp4
$ts = gmdate("D, d M Y H:i:s", time() + 600) . " GMT";
header("Expires: $ts");
//header("Accept-Ranges: bytes");
header("X-Accel-Redirect: $filePath");
html部分
<div id="video" style="width: 100%; height: auto;">
<video
id="my-video"
class="video-js vjs-theme-city vjs-big-play-centered vjs-16-9"
controls
preload="none"
x-webkit-airplay="true"
x5-playsinline="true"
webkit-playsinline="true"
playsinline="true"
x5-video-player-type="h5"
controlsList="nodownload"
crossOrigin="anonymous"
>
<p class="vjs-no-js">
<a href="https://videojs.com/html5-video-support/" target="_blank">
</a>
</p>
</video>
</div>
videojs的配置
var options =
{
fluid: true, /* auto size,if "vjs-fluid" then is true */
preload: 'auto', /* auto metadata none */
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false,
//controls: true,
aspectRatio:'16:9', /* 16:9 or 4:3 */
//poster: 'none',
//src: 'none', /* sources src */
//autoSetup: false, /* stop data-setup */
poster:'gopic_subject.php?id='+subjectid,
bigPlayButton: true,
textTrackDisplay: false,
posterImage: true,
errorDisplay: true,
controlBar: true,
muted: false,
loop: false,
flash: {
hls: { withCredentials: true },
swf: './video-js-swf/video-js.swf'
},
html5: {
hls: { withCredentials: true }
},
techOrder: ['flash', 'html5'],// 兼容顺序
notSupportedMessage: '错误',
errorDisplay: false,
/*
sources: [
{
src: mediaurl,
type: mediatype
}],
*/
};
播放部分和事件
playerIndex = videojs('my-video', options, function onPlayerReady()
{
//playerIndex.options.flash.swf = "video-js.swf";
console.log('Your player is ready!');
// In this context, `this` is the player that was created by Video.js.
//this.play();
//this.currentTime = 0;
this.on('play', function ()
{
console.log('start/replay');
//console.log('url'+this.currentTime());
hidePlayList();
});
this.on('pause', function ()
{
console.log('stop');
showPlayList();
});
// How about an event listener?
this.on('ended', function()
{
console.log('over');
if(this.currentTime()>=this.duration()-1 && this.duration()>0){
//this.dispose();
}
//videojs.log('Awww...over so soon?!');
});
this.on('timeupdate', function() {
//console.log(this.currentTime());
});
this.landscapeFullscreen(
{
fullscreen:
{
enterOnRotate: true,
alwaysInLandscapeMode: true,
iOS: true
}
});
});