如何在谷歌VR视频上制作播放和暂停按钮

我将360视频添加到网站，我想添加播放和暂停按钮。我的视频有以下代码。我非常感谢您的帮助。

<script type="text/javascript">
window.addEventListener('load', onVrViewLoad);
var vrView = new VRView.Player('#vrview', {
	width: '100%',
	height: 400,
    video: 'german.mp4',
	is_stereo: false,
  });
}
</script>

<html>
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
<div id="vrview"></div>
</html>

首先，如果你想播放视频成功，你必须这样做：

不要使用来自 storage.googleapis.com/vrview/2.0/build/vrview.min.js .
下载示例 zip 并使用脚本：vrview-master/build/vrview.js 。

其次，你想要有播放和暂停的按钮，查看示例zip，你需要链接style.css，并在style.css上有正确的路径，如下所示。

background: url('vrview-master/examples/img/ic_pause_black_24dp.svg');

window.addEventListener('load', onVrViewLoad)
let veView;
function onVrViewLoad() {
  vrView = new VRView.Player('#vrview', {
    video: '//vr.jwplayer.com/content/AgqYcfAT/AgqYcfAT-8yQ1cYbs.mp4',
    width: '300',
    height: '180'
  });
}
function play(){
  vrView.play()
}
function pause(){
  vrView.pause()
}
function mute(){
  vrView.setVolume(0)
}
function unmute(){
  vrView.setVolume(1)
}

<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
<body>
  <div id="vrview"></div>
  <button type="button"  onclick="play()">Play</button>
  <button type="button"  onclick="pause()">Pause</button>
  <button type="button"  onclick="mute()">Mute</button>
  <button type="button"  onclick="unmute()">UnMute</button>
</body>

相关内容

最新更新

热门标签：