如何为移动设备制作 html 5 视频播放按钮？

Question

我想专门为移动设备创建一个视频按钮。所以在我的页面上应该只有一个 "play" 按钮，没有别的（没有视频 window）。如果我点击 "play" 按钮，视频应该会在我的移动设备上自动全屏显示。如果我关闭这个 window 或视频结束，那么视频应该会再次消失。

我正在尝试使用以下代码实现此目的，但视频不想隐藏：

var myVideo = document.getElementById("video1");

$(document).ready(function(){
myVideo.hide();
});

function playPause() {
    if (myVideo.paused)
        myVideo.play();
        myVideo.show();
    else
        myVideo.pause();
        myVideo.hide();
}

<div style="text-align:center">
  <button onclick="playPause()">Play</button>
 
  <br><br>
  <video id="video1" width="420">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

Answer 1

function playPause() {
    if (myVideo.paused) {
        myVideo.play();
        myVideo.show();
    } else {
        myVideo.pause();
        myVideo.hide();
    }
}

您忘记了 if 和 else 的括号。如果你加载 jquery 它应该可以工作！

如何为移动设备制作 html 5 视频播放按钮？

How can I make a html 5 video play button only for mobile devices?

video

jquery

html5-video