苹果safari对videojs的支持测试

播放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
		}
	});

});