Why are Chrome controls showing only controls when using HTML5 video?

I use the following HTML5 to display a video, but only controls are displayed in Chrome. Works well in Safari and Firefox:

<video width="720" height="480" controls="controls" preload="preload">
    <source src="<?php bloginfo('url'); ?>/wp-content/uploads/Reel.ogv" type="video/ogg; codecs=theora,vorbis" >
    <source src="<?php bloginfo('url'); ?>/wp-content/uploads/Reel.mp4" type="video/mp4">
    Your browser doesn't support video.
</video>

Any ideas?

+3
source share
1 answer

It seems to me that the first tag <source>has an attribute of the wrong type:

<source src="<?php bloginfo('url'); ?>/wp-content/uploads/Reel.ogv" type="video/ogg; codecs=theora,vorbis" >

should be type="video/ogg; codecs='theora, vorbis'"if I remember correctly. Also just try type = "video / ogg".

+5
source

Source: https://habr.com/ru/post/1746291/


All Articles