Question

我的任务是通过一些动作在videosphere中播放和停止视频。通过单击videosphere中的哪个视频应该更改，我可以获得元素列表。我正在使用React.js和一个框架库。我花了很多时间来实现所需的行为，因此我想分享一些代码和注释。突然有人会有所帮助。

Answer 1

一些重要的事情：

您应该在以下位置播放和暂停 a-video （而不是 a-videosphere ）视频圈控制事件无效
您不能停止视频，应使用 video.currentTime = 0;然后是video.pause（）
您应该从视频标签中删除自动播放属性并自己播放，因为如果您保留自动播放属性，则视频中的音轨将被复制
如果删除了 autoplay 属性，则无法在用户单击事件之前播放视频，因此您需要在某些元素上模仿 click事件。我创建了 hidden 跨度并在其上模拟点击事件。有关问题https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

我的代码片段：

static getDerivedStateFromProps(nextProps, prevState){
        let update = {};
        if(nextProps.scene_item){
            let isVideoSphere = nextProps.scene_item.type_id === experienceTypes.videosphere;
            update.sceneUrl = nextProps.scene_item.asset_url;
            update.isVideoSphere = isVideoSphere;
            if(isVideoSphere){
                playVideo('scene-video',true)
            }
        }
        return Object.keys(update).length ? update : null;


    }

componentWillUnmount() {
        pauseVideo('scene-video')
    }




export function pauseVideo(id) {
    //pause aframe 360 video
    let video = document.getElementById(id);
    video.currentTime = 0;
    video.pause()
}

export function playVideo(id,first_playing) {
    //play aframe 360 video
    let video = document.getElementById(id);
    let el = document.getElementById('clikable-el-for-play-video');
    if(video){
        if(first_playing){
          if(el){
            el.click()
            video.play()
          }
        }else video.play()
    }
}

<a-scene>
  <a-assets>
    <video id="scene-video" src={sceneUrl} loop/>
  </a-assets>
  <a-videosphere src={'#scene-video'}/>
  <span className="hidden" id="clikable-el-for-play-video"/>
</a-scene>

更新

在safari中，发出点击事件无效，因此我进行了更改：

默认情况下静音的视频
通过单击桌面的HTML元素取消视频静音（我不需要其他按钮，因此可以使用div）
在移动设备的同一HTML元素上通过onTouchEnd事件取消视频静音（如果您使用按钮，我想您可以跳过它）

handleClickOnScene = (event) => {
        let videoId = `scene-video-${this.props.scene_item.id}`;
        let video = document.getElementById(videoId);
        if(video.muted && !video.paused){
            setTimeout(increaseVideoVolume(videoId), 5000)
        }
    }

export function increaseVideoVolume(id,first_playing) {
    let video = document.getElementById(id);
    if(video){
        if(video.muted){
            video.muted = false;
        }
    }
}

以a-frame和react.js播放和暂停视频

1 个答案:

更新