CODEWITHSUNDEEP
htmlvideo
Niek15
Niek15

Reputation: 21

Mobile Video Doesnt Work without controls

The video player won't show on my mobile device (Chrome, Android P, OnePlus 6), while it does show on another, almost identical (Chrome, Android P, OnePlus 5T) device. iOs devices do show the player too.

<video muted autoplay>

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

</video>

The video tag is visible in the inspector. If I add the controls, it becomes visible on my device.

<video muted autoplay controls>

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

</video>

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

I prefer to keep the controls invisible.

Upvotes: 2

Views: 928

Answers (2)

zer00ne
zer00ne

Reputation: 43880

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

Don't know, but it's very common. It's frustrating at times but it's job security for us developers 🤑

Solution

Try adding controls (or removing controls) when one of the loading events triggers, here are the events in order:

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

Test each one, one at a time until you succeed or if you don't, you can edit your question with the extra actions you have taken. The demo below adds an event listener to a single video and then once triggered by the loadstart event, it will add controls to the video tag (or remove controls see comments in demo).

Demo

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>

Upvotes: 1

Victor Batista
Victor Batista

Reputation: 33

Try using playsinline

<video muted autoplay playsinline>

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

</video>

Upvotes: 0

Related Questions