0

I have the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <video width="400" autoplay>
        <source src="../Videos/mov_bbb.mp4" type="video/mp4">
        <source src="../Videos/mov_bbb.ogg" type="video/ogg">
        <source src="../Videos/mov_bbb.webm" type="video/webm">
        Your browser does not support autoplay HTML5 video tag.
    </video>
    <p><span>Video courtesy of </span><a href="http://bigbuckbunny.org/" target="_blank">Big Buck Bunny</a></p>
</body>
</html>

Upon opening the file in Firefox everything is working as expected.

But, upon opening the file in Chrome or Opera a still image is coming and nothing is happening.

Why is it so?

I am using Ubuntu 18.04

user10271516
  • 25
  • 1
  • 6

1 Answers1

0

A bit of a workaround. Adding the following after the closing /video tag could work.

<script> 
    document.getElementById('vid').play(); 
</script>

Does that work for you?

EDIT: After some extra digging I stumbled across this post https://stackoverflow.com/a/42414858/6524598. It seems to be the case that chrome only respects autoplaying of a video if the audio of it is muted. This would mean that the following would perhaps work for you as well:

<video width="400" autoplay muted >
    <source src="../Videos/mov_bbb.mp4" type="video/mp4">
    <source src="../Videos/mov_bbb.ogg" type="video/ogg">
    <source src="../Videos/mov_bbb.webm" type="video/webm">
    Your browser does not support autoplay HTML5 video tag.
</video>
Lesleyvdp
  • 313
  • 2
  • 14