播放 youtube 视频时隐藏 div

Posted 2023-05-07

【中文标题】播放 youtube 视频时隐藏 div

【英文标题】：Hide the div when youtube video is playing

【发布时间】：2016-07-26 16:43:36

【问题描述】：

我在页面上嵌入了一个 youtube 视频，该视频上有一个重叠的 div。由于 div 与视频重叠，因此无法访问视频控制器。

如何在视频开始播放时隐藏重叠的 div，并在视频停止播放时再次显示。

这是我的嵌入式代码

<div class="wrap">
    <iframe id="player" type="text/html"  
      src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"
      frameborder="0">
    </iframe>
    <div class="title">
      Hide this div when video starts playing and show it when video is paused
    </div>
 </div>

Demo

【问题讨论】：

我建议你使用 HTML5 video 标签并使用它们的属性***.com/a/8601183/5965782

某些浏览器兼容性问题无法使用视频标签

【参考方案1】：

您可以使用 YouTube api。检查下面的代码。多个视频支持。

Demo

HTML

<div class="wrap js-player" id="1">
    <div class="js-video" data-id="1" data-src="CJlKYk9lbqg"></div>
    <div class="js-title">
        Hide this div when video starts playing and show it when video is paused
    </div>
</div>

<div class="wrap js-player" id="2">
    <div class="js-video" data-id="2" data-src="u1zgFlCw8Aw"></div>
    <div class="js-title">
        Hide this div when video starts playing and show it when video is paused
    </div>
</div>

CSS

.wrap 
  position: relative;
  display: inline-block;
  height: 390px;
  width: 640px;


.js-title
  background:rgba(255, 0, 0, 0.7) ;
  padding: 20px;
  position: absolute;
  bottom: 0; 
  left:0; 
  right:0;
  color: white; 
  font-size: 20px

Js

var YT = 
    PlayerState: 
        ENDED: 0,
        PLAYING: 1,
        PAUSED: 2,
        BUFFERING: 3,
        CUED: 4
    
;

function embedScript() 
    var tag = document.createElement('script');

    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

embedScript();

function onYouTubeIframeAPIReady() 
    var players = document.getElementsByClassName('js-player');

    if (players.length) 
        for (var i = 0; i < players.length; i++) 
            var jsPlayer = players[i];
            var jsVideo = jsPlayer.getElementsByClassName("js-video")[0];
            var videoUrl = jsVideo.dataset.src;


            var player;
            player = new YT.Player(jsVideo, 
                height: '390',
                width: '640',
                videoId: videoUrl,
                playerVars: 'rel': 0,
                events: 
                    'onStateChange': onPlayerStateChange
                
            );
        
     else 
        console.log('No videos');
    


function onPlayerStateChange(event) 
    var videoContainer = document.getElementById(event.target.l.dataset.id);
    var jsTitle = videoContainer.getElementsByClassName("js-title")[0];

    switch (event.data) 
        case YT.PlayerState.PAUSED:
            jsTitle.style.display = "block";
            break;
        case YT.PlayerState.PLAYING:
            jsTitle.style.display = "none";
            break;
    

【讨论】：

这个使用的外部api文件是什么？

@user3932810 查看 embedScript() 函数。我们用 src="youtube.com/iframe_api" 创建一个脚本标签，并将这个脚本插入到页面上。还使用了 jQuery，请参阅 codepen。

我在JSfiddle DEMO 中使用了相同的方法，但在这里不起作用。知道为什么吗？

@user3932810 你好。我更改了代码并将其粘贴到 jsFiddle - jsfiddle.net/m7g83zqk 您的错误是：1）您忘记包含 jQuery； 2）您仍然使用 iframe 元素而不是 div。我修复了代码。现在它可以在没有 jq 的情况下工作。您可以通过 div 元素的 data-src 属性传递视频 ID。 Css 也有变化。

谢谢。但是如果有多个视频怎么办？例如，在我的情况下，视频在图片库中，因此有多个视频。多视频仪式不建议通过脚本传递视频链接？

【参考方案2】：

试试这个。视频结束时会出现警告框。您可以根据视频状态更改条件。在播放状态下可以隐藏 div，在暂停状态下可以使用脚本显示 div。

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued)

http://jsfiddle.net/7Gznb/