VR 視訊播放器研究
阿新 • • 發佈:2019-02-19
最近關注VR視訊播放器:
無意間看到了jwplayer 提供的demo。
流暢度,效果不錯,於是想研究一下他的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的開原始碼:
WebGL:
WebGL 1.0 is based on OpenGL ES 2.0 and provides an API for 3D graphics。