如何在html5中仅使用播放选项加载视频和音频选项答案

【问题标题】：How to load video and audio options with only play option in html5如何在html5中仅使用播放选项加载视频和音频选项
【发布时间】：2020-04-03 12:01:45
【问题描述】：

我只需要视频和音频控件中的播放选项。

但现在视频和音频包含更多选项，例如下载、静音、声音选项。

但我只想要播放和暂停选项。

我也使用控制列表，但它无法帮助我实现这一点。

如果 HTML5 中有任何其他建议。

谢谢

【问题讨论】：

标签： javascript html css

【解决方案1】：

获取有关自定义控件的一些详细信息https://stackoverflow.com/a/2117660/8664903

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 

<video id="myVideo" width="320" height="176">
  <source src="video_name.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<script> 
var vid = document.getElementById("myVideo"); 

function playVid() { 
  vid.play(); 
} 

function pauseVid() { 
  vid.pause(); 
} 
</script> 
</body> 
</html>

您必须根据您的要求设计按钮。如果你澄清了，请点赞。

【讨论】：

【解决方案2】：

这是我为你做的

var video = document.querySelector("video"),
  overlay = document.getElementById("overlay");

overlay.onclick = function() {
  this.style.display = "none";
  video.play();
}
video.onclick = function() {
  this.pause();
}
video.onplay = function() {
  overlay.style.display = "none";
}
video.onpause = function() {
  overlay.style.display = "";
}

#video-container {
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 2px 2px 3px #aaa;
}
video {
  background-color: black;
  width: 300px;
  height: 200px;
}
#overlay {
  width: 300px;
  height: 200px;
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
}
#play-button {
  width: 60px;
  height: 50px;
  position: absolute;
  top: 70px;
  left: 120px;
  border-radius: 15px;
  box-shadow: 2px 2px 2px #fff;
}

<div id="video-container">
  <video src="https://vod-progressive.akamaized.net/exp=1585938795~acl=%2A%2F1135623446.mp4%2A~hmac=419cccad43d5a5a7e4d2a8a33ffafca4afde0978cda8011e2cefb0e61bcbe0c7/vimeo-prod-skyfire-std-us/01/4577/11/297887916/1135623446.mp4?download=1&filename=Pexels+Videos+1531418.mp4"></video>
  <div id="overlay">
    <svg id="play-button">
      <rect width="60" height="50" rx="10" fill="red"/>
      <polygon points="20,10 20,40 45,25" fill="white"/>
    </svg>
  </div>
</div>

【讨论】：