如何制作仅适用于移动设备的 html 5 视频播放按钮？答案

【问题标题】：How can I make a html 5 video play button only for mobile devices?如何制作仅适用于移动设备的 html 5 视频播放按钮？
【发布时间】：2016-09-12 08:04:38
【问题描述】：

我想为移动设备创建一个视频按钮。所以在我的页面上应该只有一个“播放”按钮，没有别的（没有视频窗口）。如果我点击“播放”按钮，视频应该会在我的移动设备中自动全屏播放。如果我关闭此窗口或视频播放完毕，视频应该会再次消失。

我正在尝试使用以下代码来实现这一点，但视频不想隐藏：

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>

【问题讨论】：

标签： jquery video html5-video

【解决方案1】：

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

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

【讨论】：