Home  >  Article  >  Web Front-end  >  Example code for h5 video tag usage

Example code for h5 video tag usage

零下一度
零下一度Original
2018-05-15 10:30:205221browse

HTML video is suitable for HTML 5+ and is used to define video streaming media for online viewing. Here is a brief introduction for the convenience of friends who need it

HTML 39000f942b2545a5315c57fa3276f220 is suitable for HTML 5+, used to define video streaming for online viewing.

<video 
width
="320" 
height
="240" src="www.php.cn/movie.ogg" controls="controls">

This is the comment text. If the browser cannot support HTML 5, the text here will be displayed. If supported, the video will be displayed directly and the text will be ignored.
a6a9c6d3f311dabb528ad355798dc27d

In HTML 4 and before, if you want to embed a video for online viewing in a web page, you generally need to use Flash video streaming, by using 273238ce9338fbb04bee6997e5552b95 and d8e2720730be5ddc9c2a3782839e8eb6 tag, you can play video files in swf, flv and other formats through the browser, but the premise is that the browser must install a third-party plug-in: Adobe Flash Player. Modern smartphones and iPads generally cannot support Flash, so they cannot browse videos on the web. HTML 5 has changed this fact. Web developers only need to use the 39000f942b2545a5315c57fa3276f220 tag to easily load video files without any third-party plug-ins.

Properties Value Description
autoplay autoplay If this attribute appears, the video will be played as soon as it is ready.
controls controls If this attribute appears, controls will be displayed to the user, such as the play button.
height Pixel value Sets the height of the video player.
loop loop If this attribute appears, playback will start again after the media file completes playback.
preload auto/meta/none Specifies whether to preload the video, possible values:
auto - load when the page is loaded Load the entire video
meta - only load the metadata
when the page loadsnone - 当页面加载后不载入视频
* src 视频地址 要播放的视频的 URL,建议使用绝对地址。
width 像素值 设置视频播放器的宽度。


如何写兼容的视频标签?

由于旧的浏览器和Internet Explorer不支持39000f942b2545a5315c57fa3276f220元素,考虑到兼容性,我们必须为这些浏览器找到一个支持Flash文件的解决方案。不幸的是,和HTML 5音频一样,涉及到视频的文件格式,Firefox 和 Safari/Chrome 的支持方式并不相同。因此,如果你想在这个时候使用HTML 5视频,则需要创建三个视频版本。OGG,MP4,FLV/SWF

<video width="320" height="240" controls> 
<!-- 兼容 Firefox --> 
<source src="http://www.jb51.net/ movie.ogg" type="video/ogg" /> 
<!-- 兼容 Safari/Chrome--> 
<source src="http://www.jb51.net/ movie.mp4" type="video/mp4" /> 
<!-- 如果浏览器不支持video标签,则使用flash --> 
<embed src="http://www.jb51.net/ movie.swf" type="application/x-shockwave-flash" 
width="320" height="240" allowscriptaccess="always" allowfullscreen="true"></embed> 
</video>

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

4. H5 video标签只能放声音不能放视频的解决办法

5. IIS的MIME未注册MP4类型,导致无法识别vidoe标签的解决办法

The above is the detailed content of Example code for h5 video tag usage. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn