如何在 video.js 中一键自动播放视频和全屏？

Question

我想显示缩略图列表，单击缩略图时我希望缩略图的视频直接全屏显示并自动播放。

我正在考虑在单击 link/button/image 时启动播放和全屏功能，但我找不到按钮的相关 functions/actions。

因为我在网站上有多个视频，所以我似乎必须遍历所有视频才能为所有视频启用功能？文档脚本总是需要依赖于特定的视频对象，无法找到一种方法来创建一个函数作为所有视频的全局预设。

Answer 1

这很简单，只需设置视频缩略图的 javasricpt 方法 onclick 即可。这是代码片段。

function playVideo(){
  var elem = document.getElementsByTagName('video')[0];
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  }else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  }else if (elem.msRequestFullscreen) { 
    elem.msRequestFullscreen();
  }else{
    alert("Full screen not supported");
    return;
  }
  elem.play();
}

<html>
<body>
<button onclick="playVideo();">Click me!</button>
<video controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
</video>
</body>
</html>

这在 Whosebug 片段中不起作用，但在普通浏览器中有效。

如何在 video.js 中一键自动播放视频和全屏？

How to autoplay video and fullscreen with one click in video.js?

javascript

video.js