html - 移动视频没有控件就无法工作

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

"Why is the video invisible on some devices, even when they are almost identical?"

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

---

解决方案

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

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>