javascript - 显示 HTML5 视频控件但不允许用户更改任何内容？

Question

是否可以向用户显示 HTML5 视频播放器的控件但不允许他们更改任何内容，例如查找视频的任何部分、更改音量等？

Answer 1

一种简单的方法是在视频上方绝对放置一个透明元素。
您还可以创建仅显示时间线但不允许交互的自定义​​视频控件。

Answer 2

原生 HTML5<video>元素不允许这种行为。但是，正如 Andy 所说，您可以自由地提供自己的控件并将它们设为只读。

看看MediaElementJS，一个封装 HTML5 视频并提供可换肤控件的 javascript 库。例如，您可以提取进度条的源代码，并对其进行修改以删除单击处理程序。

Answer 3

有很多方法可以做到这一点。

第一种方法是使用video{pointer-events:none;}，其中用户不能单击或使用默认控制栏。但这里用户也不能播放/暂停视频。所以，你必须添加播放/暂停按钮（正如我在片段中添加的那样）。

第二种方式在这里。但是你必须添加进度条和时间。（进度条）

第三种方法是使用适合执行此操作的库或框架。 例如。使用Youtube嵌入没有控件的视频。这可能是最好的方法，但你的视频应该在 Youtube 上。如果没有，上传它..:)

var vid = document.getElementById("vid"); 

function play() { 
    if (vid.paused) 
        vid.play(); 
    else 
        vid.pause(); 
} 

video{pointer-events:none;}

<div>
<video id="vid" width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
  </div>
<br>
<button onclick="play()">Play/Pause</button>