Question

我正在使用Youtube api将视频放在div的背景上，我需要的是检测视频何时结束加载，我不想显示加载，在它结束加载之前我想要为了显示灰色背景，我已经设置了灰色背景，但我无法检测它何时真正开始而不是加载，

目前我在javascript方面有这个：

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '360',
            width: '640',
            videoId: 'kn-1D5z3-Cs',
            autoPlay: true,
            startAt: 10,
            loop: 1,
            playerVars: { 'autoplay': 1, 'controls': 0, 'rel': 0, 'modestbranding': 1, 'showinfo': 0 },


            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        player.mute();
        event.target.playVideo();
    }

    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    var done = false;
    function onPlayerStateChange(e) {
   if (event.data === 1) {

    }
    function stopVideo() {
        player.stopVideo();
    }
</script>

在我的HTML中一切都很好，我只需要检测视频的开头并隐藏那个背景div，该怎么做？

Answer 1

我只需要检测视频的开头

Youtube视频播放器没有START状态。你可以使用的是event.data == 5，其中5是video cued状态。这是因为视频提示是视频即将开始时的状态。您现在可以利用这些知识，并在视频提示时隐藏您的div。

来自Youtube Events docs：

“当视频被提示并准备播放时，播放器将播放一个视频提示（5）事件。“

视频开始时隐藏div

1 个答案: