Video.js调用play()方法无法启动播放问题求助

问题背景 #

我有一个Video.js播放器实例，想要通过调用play()方法以编程方式启动播放，播放器的HTML标记如下：

<video-js id   ="some-player-id"
          src  ="https://vjs.zencdn.net/v/oceans.mp4"
          class="VideoPlayer">
</video-js>

按照官方文档的指引，创建实例后在ready回调里调用play()，代码如下：

// 初始化播放器实例
const player = videojs.getPlayer("some-player-id");

// 播放器就绪后启动播放
player.ready(function() {
  player.play()
});

但这段代码无法正常工作，完整可复现的代码片段如下：

HTML代码 #

<link href="https://vjs.zencdn.net/7.20.1/video-js.css" rel="stylesheet"/>

<div class="VideoPlayer">
  <video-js id   ="some-player-id" 
            src  ="https://vjs.zencdn.net/v/oceans.mp4" 
            class="VideoPlayer__videoJs">
  </video-js>
</div>

<script src="https://vjs.zencdn.net/7.20.1/video.min.js"></script>

JavaScript代码 #

// 初始化播放器实例
const player = videojs("some-player-id");

// 播放器就绪后启动播放
player.ready(function() {
  player.play();
});

无法工作的核心原因 #

• 浏览器自动播放策略限制：现代浏览器（Chrome、Firefox、Safari等）都严格限制无用户交互的自动播放行为，目的是避免不必要的音视频打扰用户。如果视频带有音频且未静音，直接调用play()会被浏览器阻止，除非用户之前已经和页面有过交互（比如点击过页面）。
• 代码执行时机问题：如果JavaScript代码在video.min.js脚本加载完成前执行，会导致videojs对象未定义，无法创建播放器实例。不过从你提供的完整代码来看，只要JS代码放在<script src="video.min.js"></script>之后执行，这个问题就不存在。

解决办法 #

1. 添加静音属性绕过限制：如果场景允许静音自动播放，可以给video-js标签添加muted和autoplay属性，或者在代码里设置静音后再调用play()：

player.ready(function() {
  player.muted(true); // 先设置静音
  player.play();
});

对应的HTML也可以提前设置：

<video-js id   ="some-player-id"
          src  ="https://vjs.zencdn.net/v/oceans.mp4"
          class="VideoPlayer"
          muted autoplay>
</video-js>

2. 绑定用户交互触发播放：如果必须带声音播放，只能通过用户的主动交互（比如点击按钮）来触发play()：

// 给页面中的按钮绑定点击事件
document.getElementById('play-btn').addEventListener('click', function() {
  player.ready(function() {
    player.play();
  });
});

3. 确保代码执行时机正确：把JavaScript代码放在video.min.js脚本加载完成之后，或者使用DOMContentLoaded事件确保DOM就绪后再执行：

document.addEventListener('DOMContentLoaded', function() {
  const player = videojs("some-player-id");
  player.ready(function() {
    // 这里执行播放逻辑
  });
});

内容的提问来源于stack exchange，提问作者JoSch