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。

     



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coloriy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值