移动视频在没有控件的情况下无法正常工作

Question

视频播放器不会显示在我的移动设备（Chrome，Android P，OnePlus 6）上，而会在另一台几乎相同的设备（Chrome，Android P，OnePlus 5T）上显示。 iOS设备也会显示播放器。

<video muted autoplay>
           <source src="video/doc.webm" type="video/webm">
           <source src="video/doc.mp4" type="video/mp4">
</video>

视频标签在检查器中可见。如果我添加控件，它将在我的设备上可见。

<video muted autoplay controls>
       <source src="video/doc.webm" type="video/webm">
       <source src="video/doc.mp4" type="video/mp4">
</video>

为什么视频在某些设备上不可见，即使它们几乎相同？

我更喜欢保持控件不可见。

Answer 1

"为什么视频在某些设备上是不可见的，即使它们几乎相同？"

不知道，但很常见。这有时令人沮丧，但对我们开发人员🤑来说是工作保障

---

溶液

尝试在其中一个加载事件触发时添加控件（或删除控件），以下是按顺序排列的事件：

1. loadstart
2. durationchange
3. loadedmetadata
4. loadeddata
5. progress
6. canplay
7. canplaythrough

逐个测试，直到成功，或者如果您没有成功，您可以使用已采取的额外操作来编辑您的问题。下面的演示将事件侦听器添加到单个视频，然后一旦被loadstart事件触发，它将向视频标记添加控件（或删除控件，请参阅演示中的注释）。

---

演示

document.querySelector('video').addEventListener('loadstart', function(e) {
  e.target.controls = true;
  // This is an alternate
  // e.target.setAttribute('controls', true);
  /* To remove controls */
  // e.target.controls = false;
  // or
  // e.target.removeAttribute('controls');
});

<video muted autoplay>
  <source src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4" type="video/mp4">
</video>

Answer 2

尝试使用 playsinline

<video muted autoplay playsinline>
       <source src="video/doc.webm" type="video/webm">
       <source src="video/doc.mp4" type="video/mp4">
</video>