Video.js 上的视频控件仅在 HTML5 中出现答案

【问题标题】：Video controls on Video.js appear only with HTML5Video.js 上的视频控件仅在 HTML5 中出现
【发布时间】：2020-01-21 03:29:58
【问题描述】：

我正在使用 Video.js 来显示一些短视频。我使用 Video.js 的第一个页面如下所示：

  <video id='my-video' class='video-js' controls preload='auto' width='800' height='600' poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
    <source src='example.mp4' type="video/mp4">
  </video>

使用上面的代码播放此视频时，我看到一个暂停/播放按钮（它在暂停和播放之间切换）、一个静音按钮和一个进度条，只要我将鼠标移到播放器窗口上。

我开始学习如何在 Javascript 中执行此操作，因为我希望能够将视频名称传递给函数并让它在单击按钮时播放该视频。修改后的 HTML 如下：

  <button type="button" onclick="playit('example.mp4')">Press Me</button>
  <video id='my-video' class='video-js' width='800' height='600' poster='MY_VIDEO_POSTER.jpg'>
  </video>

我用来播放视频的 Javascript 如下：

var playit = function(vName) {

   var options = {
       sources: [{
          src: vName,
          type: "video/mp4"
       }],
       preload: "auto",
       controls: true,
       autoplay: true
   };

   var play = videojs("my-video",options,function onPlayerReady() {
       this.play();
   });
}

Javascript 运行良好，但生成的播放视频只显示进度条！播放/暂停和静音消失了。

我需要在选项对象中设置什么东西来使这些控件出现吗？如何使用 Javascript 恢复暂停/播放和静音控件？

另外：如果能提供真正的音量控制和全屏控制，那就太好了。我知道这些存在于 View.js 控件中，并且在使用纯 HTML 视频时会出现全屏控件，但是从文档中不清楚如何在使用 Javascript 时使它们中的任何一个出现。

谁能告诉我如何使它们也可用？

我

【问题讨论】：

标签： javascript video video.js

【解决方案1】：

在上面的第一个示例中，您在 HTML5 视频标签中有“控件”属性 - 这就是告诉浏览器包含控件的原因。

您的第二个示例中缺少此内容 - 即您在 HTML5 视频标签中没有“控件”属性。你确实在 Javascript 中有它，但我的经验是最简单的方法是在 HTML5 中添加它，然后控制行为以及你做什么和不想通过 Javascript 出现 - 请参阅此示例：

let player = videojs('testVid', {
  controlBar: {
    volumePanel: {
      inline: false
    }
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
</head>
<body>

<video id="testVid" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
      data-setup='{}'>
    <source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type='video/mp4'>
  </video>

</body>
</html>

值得注意的是，这在 video.js 中随着时间的推移发生了变化，但此页面通常保持最新（在撰写本文时）：https://docs.videojs.com/tutorial-components.html#default-component-tree

【讨论】：