Question

我正在使用video.js制作首页，我让这些birds在视频播放器前自由飞行，所以我将包含视频元素的div设置为非常负面的z -index，但是，然后，我不能按播放，因为播放按钮设置在鸟（画布）后面，因为它是视频的孩子。 enter image description here 我怎样才能在开始时在鸟类面前获得播放按钮，以便我可以按下播放（我会将容器移回到他们面前的onclick）？

代码：

<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>

Answer 1

您可以点击飞鸟覆盖物触发视频播放事件。

myPlayer.play();

如何将videojs播放按钮带到视频元素前面的画布前面？

1 个答案: