OnClick Fullscreen并播放视频

我有一个.mov视频，在单击按钮或元素后，我需要在全屏上播放。

全屏的事情在起作用，我现在唯一需要的就是在整个屏幕上玩。因此，在单击按钮或元素时，我需要触发2个事件。1是全屏，2是玩。

我有此代码要全屏：

<script type="text/javascript">
function goFullscreen(id) {
    var element = document.getElementById(id);
    if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
}

<body>
    <video class="video_player" id="player" width="100%" height="100%" poster="images/placeholder.png">
    <source src="video/video.mov"/>
        Your browser does not support the HTML5 video tag.  Use a better browser!
    </video>
    <button class="toggle-btn" id="togglePlay" onclick="goFullscreen('player'); return false">
        View Fullscreen!
    </button>
</body>

因此，在单击时，它将完整屏幕（所有不带滚动条和工具栏的全屏），但是现在我还需要在完整屏幕时播放。

<video id="videoplay" controls="controls" autoplay="autoplay"> 
    <source src=small.mp4 type=video/mp4>
    <source src=small.3gp type=video/3gp>
    <source src=small.webm type=video/webm> 
    <source src=small.ogv type=video/ogg> 
</video>
<script type="text/javascript">
var myVideo = document.getElementById('videoplay');
myVideo.addEventListener('click', function () {
    if (myVideo.paused) {
      if (myVideo.requestFullscreen) {
        myVideo.requestFullscreen();
      }
      else if (myVideo.msRequestFullscreen) {
        myVideo.msRequestFullscreen();
      }
      else if (myVideo.mozRequestFullScreen) {
        myVideo.mozRequestFullScreen();
      }
      else if (myVideo.webkitRequestFullScreen) {
        myVideo.webkitRequestFullScreen();
      }
      myVideo.play();
    }
    else {
      myVideo.pause();
    }
}, false);

相关内容

最新更新

热门标签：