I am trying to embed a video in a web page, displayed in Opera (80.0.4170.72).
I have never used the tag before, so as a start copied the example straight out of W3Schools:
<video width="320" height="240" controls>
<source src="http://www.xxxxxxxxxxx.co.uk/cinefilms/7.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Doesn't work. The page loads, the player appears, sits there for a second or two with a rotating wait indicator, then just sits there. MS Edge does the same.
If I replace the tag with an <a>
tag (<a href="http://www.xxxxxxxxxxx.co.uk/cinefilms/7.mp4">video</a>
), then on clicking it the browser displays the video player itself (no help from me), but again it behaves as before, doesn't play.
If I right click on the hyperlink from the <a>
tag and select 'save linked content as' I can download the file and play it OK in VLC, so it is definitely there and a good file (about 50MB).
Don't understand what is going on, feel I must have missed something obvious. (If I try it in IE, it says 'your browser does not support the video tag', but with the <a>
tag it will download and play it in VLC).
Update: doesn't work in Chrome, either.
mp4 is the container for your video. But what is the codec? (You can check it by entering the video URL at https://ffprobe.a.video).
I'm betting it is encoded as H.265 HVEC - which is not supported in Opera/edge (actually only in Safari - https://caniuse.com/?search=h265).
To get the mp4 to playback in all browsers, you'll want to transcode it to h264 (98.1% support on the web) https://caniuse.com/?search=h264