0

我正在使用video.js制作首页，我让这些鸟在视频播放器前自由飞翔，所以我将包含视频元素的 div 设置为非常负的 z-index，但是，我可以不要按播放，因为播放按钮也设置在小鸟（画布）后面，因为它是视频的孩子。 在此处输入图像描述 我怎样才能在开始时在鸟儿面前获得播放按钮，以便我可以按下播放（我会在点击时将容器移回它们面前）？

代码：

<html>
<head>
    <script>
    function bringPlayButtonInFrontOfBirds(){
     document.getElementsByClassName("vjs-big-play-button")[0].style.zIndex = "200000";
     document.getElementsByClassName("vjs-control-bar")[0].style.zIndex = "200000";

    }
</script>
</head>
    <body onload ="bringPlayButtonInFrontOfBirds()">
    <script>//birdcode
    </script>

    <div id="container" style ="position:absolute; left:28%;top:25%; z-index:-1000;">

      <video id="example_video_1" class="video-js vjs-default-skin" controls  preload="auto" width="640" height="264"
           style ="z-index:1000;"
        data-setup='{"techOrder":["youtube","html5"],"ytcontrols":false}'>
        <source src="http://www.youtube.com/watch?v=g1As9ObURDA" type="video/youtube" />
      </video>

   </div>

    </body>
</html>
4

1 回答 1

-1

您可以通过单击飞鸟覆盖来触发视频播放事件。

myPlayer.play();
于 2013-10-08T09:52:02.343 回答