Some precautions and code methods for playing videos through HTML5 calls

Author：Eve Cole Update Time：2025-04-01 05:48:01

In this quick tip on video, we will explore how to use HTML5 video tags in your project. Since old browsers and Internet Explorer do not support the <video> element, we must find a solution for these browsers that supports Flash files.

The following are some precautions and code methods for playing videos related to HTML5 calling related to HTML5 video playback. The content is a tutorial carefully selected and compiled by this website. I hope it will be helpful to netizens. The following is the detailed content:

Unfortunately, like HTML5 audio, the file formats involved in videos are not supported in the same way as Firefox and Safari/Chrome. So if you want to use HTML5 videos at this time, you need to create three video versions.

.OGG

Firefox supports this format well. You can use VLC (Media->Stream/Save) to achieve easy conversion of videos.

.MP4

Many screen recording tools support automatic export of MP4 formats, which you can use to generate videos in a specified format for Safari and Chrome browsers.

.FLV/.SWF

Not all browsers support HTML5 videos, of course, be sure to add a second-best version of Flash, considering compatibility.

 <!DOCTYPE html><html lang=en><head><meta http-equiv=Content-Type content=text/html; charset=utf-8><title>untitled</title></head><body><video controls width=500><!-- if Firefox --><source src=video.ogg type=video/ogg /><!-- if Safari/Chrome--><source src=video.mp4 type=video/mp4 /><!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like Use a Better Browser! if you're feeling nasty. (Better to use a Flash file though.) --><embed src=http://blip.tv/play/gcMVgcmBAgA%2Em4v type=application/x-shockwave-flash width=1024 height=798 allowscriptaccess=always allowfullscreen=true></embed></video></body></html>

Optional parameters for some <video> elements:

controls: Boolean value, display the play/stop button;

poster: The URL of the image displayed before the video is played;

autoplay: Boolean value, the video will be automatically played after the page is loaded;

width: The width required for the video. By default, the browser will automatically detect the provided video size;

height: The height required for video;

src: The path to the video file, using the child element <source> to achieve better.

Notes on HTML5 videos

1. Three video formats need to be created to achieve support for Firefox, Safari/Chrome and IE;

2. Do not omit any format. HTML5 cannot be compatible with Firefox and Safari as you think. Safari can interpret the <video> tag and expects to load the appropriate file. If a certain format is omitted, it will cause the player to be blank;

3. Remember that full screen display is not supported by Safari and Chrome. However, in Firefox 3.6, you can browse in full screen.

4. You must understand the reason why IE loads Flash files because IE cannot interpret the <video> element. However, if the browser supports it, you will expect to load the appropriate file.

English original: Quick Tip: HTML5 Video with a Fallback to Flash Nettus+

The content about some precautions and code methods for playing videos through HTML5 calls is over here. You can bookmark this page URL http://www.VeVb.com/web/a/2018090561468.shtml for easy access next time.