Question

我有一个.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>

所以点击它会全屏显示（全屏没有滚动条和工具栏），但现在我需要它才能全屏播放。

Answer 1

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

点击全屏播放视频

1 个答案: