VR 视频播放器研究

最近关注VR视频播放器：

无意间看到了jwplayer 提供的demo。

https://developer.jwplayer.com/jw-player/demos/innovation/360-video/

流畅度，效果不错，于是想研究一下他的player如何实现的，于是分析页面源码，看到player的javascrip脚本。

<script type="text/javascript">

var player = jwplayer('vr-player').setup({
	primary: 'html5',
	hlshtml: true,
	width: '100%',
	playlist: [{
		title: 'Caminandes VR',
		mediaid: 'D5X2Trf5',
		image: '//content.jwplatform.com/thumbs/D5X2Trf5-720.jpg',
		link: '//content.jwplatform.com/previews/D5X2Trf5',
		sources: [{
			file: '//content.jwplatform.com/manifests/D5X2Trf5.m3u8',
			type: 'hls'
		}, {
			duration: 41,
			file: '//content.jwplatform.com/videos/D5X2Trf5-O8SBuWVa.mp4',
			height: 1080,
			label: '3840x1080 px',
			type: 'video/mp4',
			width: 3840
		}, {
			duration: 41,
			file: '//content.jwplatform.com/videos/D5X2Trf5-Na6BIilo.mp4',
			height: 720,
			label: '2560x720 px',
			type: 'video/mp4',
			width: 2560,
      "default": true
		}, {
			duration: 41,
			file: '//content.jwplatform.com/videos/D5X2Trf5-gl5LxSde.mp4',
			height: 360,
			label: '640x180 px',
			type: 'video/mp4',
			width: 1280
		}],
		tracks: [{
			file: '//content.jwplatform.com/strips/D5X2Trf5-120.vtt',
			kind: 'thumbnails'
		}]
	}],
	plugins: {
		'https://ssl.p.jwpcdn.com/player/plugins/vr/vr.js': {}
	}
});

player.on('error', function(error) {
	var errorDiv = document.querySelector("#error");
	if (error.message == jwplayer.vr.events.UNSUPPORTED_BROWSER ||
		error.message == jwplayer.vr.events.INITIALIZATION_ERROR) {
		errorDiv.classList.add('active');
		if (error.message == jwplayer.vr.events.UNSUPPORTED_BROWSER) {
			if (jwplayer.utils.isSafari()) {
				errorDiv.innerHTML = 'Safari is currently unsupported, please visit this ' +
					'page using <a href="https://www.google.com/chrome/">Google Chrome</a> ' +
					'or <a href="https://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a>.';
			} else {
				errorDiv.innerHTML = error.message +
					' Please upgrade to a browser with <a href="https://get.webgl.org/">WebGL support</a>.';
			}
		} else {
			errorDiv.innerHTML = error.message;
		}
	}
	console.error('Error: ' + error.message);
});

</script>
<script type="text/javascript">
if (jwplayer().id) {
	jwplayer().on('ready', function() {
		document.getElementById('demo-player-version').innerHTML = jwplayer.version.split('+')[0];
	});
}
</script>

分析上面的脚本，大概有几点，当然其中也有些不太明白，等待后续研究：

     1）基于HLS协议实现视频传输，但是不同分辨率似乎又基于mp4，而不是基于码率不同的hls流，不太明白。

     2）浏览器需要webGL支持，这个是javascript的一个3D交互API，如果要在浏览器支持vr，那么基于javascrip的webGL似乎必须要支持的。

于是继续研究：

     在github上发现jwplayer的开源代码：

             https://github.com/jwplayer/jwplayer

WebGL：

      WebGL 1.0 is based on OpenGL ES 2.0 and provides an API for 3D graphics。