source:
But it all depends on how you generated the mp4 file. If it's not done the right way, then it will only work in Chrome.
The video is set to autoplay and loop.
This gives you an image of the first frame of the mp4 file. In order to play the file, the user needs to right click the image and select ‘show controls’.
Adds the controls to the bottom of the image when the page loads. Fallback message inside the video tag is for browsers not recognizing HTML5 video.
The video tag allows for basic styling using width, height, and the poster properties. These properties are used inline in the video tag. The poster property takes an image file and uses it as the display image for the video file on the page.
video tag.This way you can also include fallback files for other video formats.
The image tag is added to the video tag.
Add a track tag and place below the source tags.
The source for our track tag is a file with a .vtt extension (video text track). This is a text file that must be in a specific format. Here is an example:
In order to customize the video player, we need to rebuild the built-in controls with our own using javascript. Also, remember to remove the controls property from the video tag. Create a separate javascript file and CSS file. Link to these files in the head of your HTML.
Add ids’ to your HTML elements and create a new div below your video tags. Give this new div the ID of ‘player_controls’ and inside the div create 4 input elements.
Just a gif.
Have a gif fallback in an image tag.