Article directory
1. HTML5 video tag video
HTML 5 <video>video tag supports audio in three formats: ogg / mpeg 4 (mp4) / webM. Different browsers support different audio formats;
- Internet Explorer:
- Version 9.0 or above supports mp4 format;
- Firefox browser:
- Version 3.5 or above supports ogg format;
- Version 4.0 or above supports webM format;
- Opera browser:
- Versions 10.5 and above support ogg format;
- Versions 10.6 and above support webM format;
- Chrome browser:
- 5.0 or above supports ogg / mp4 format;
- 6.0 and above support webM format;
- Safari browser:
- 3.0 or above supports mp4 format;
You can put videos in ogg and mp4 formats<video> in the video tag , and all browsers can play the video;
If the browser version is too old, no format is supported;
Video tag video syntax format:
<video src="url地址" controls="controls"></video>
Introduction to the video attribute of the video tag:
- controls attribute: The value is controls, which enables control buttons . Due to different performance in different browsers, under normal circumstances, control buttons are not displayed;
- autoplay attribute: The value is autoplay, which disables autoplay in the Chrome browser and does not disable autoplay in other browsers;
- If you set mute playback for the video, you can set autoplay in the Chrom browser to achieve automatic playback;
- muted attribute: The value is muted, and the video is set to play silently;
- If you set mute playback for the video, you can set autoplay in the Chrom browser to achieve automatic playback;
- width attribute: The value is a pixel value, which sets the width of the player; it is recommended to set only one width and height of the player to avoid distortion;
- Height attribute: The value is a pixel value, which sets the height of the player; it is recommended to set only one width and height of the player to avoid distortion;
- loop attribute: The value is loop, and the player is set to play in a loop;
- poster attribute: the value is the image url path, set the video position and wait for the image to be loaded;
- preload attribute:
- Set auto, which means preloading the video;
- Setting none means not loading the video in advance;
2. Video tag video code example
1. Basic example
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频标签示例</title>
<style>
</style>
</head>
<body>
<video src="media/fengjing.mp4" controls="controls"></video>
</body>
</html>
Results of the :
-
Default state:
-
Effect after playing the video:
2. Modify video size
Modify the video size by modifying the width of the video tag;
video {
width: 400px;
}
Modified code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频标签示例</title>
<style>
video {
width: 400px;
}
</style>
</head>
<body>
<video src="media/fengjing.mp4" controls="controls"></video>
</body>
</html>
display effect :
3. Video tag video configuration multiple format video code example
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频标签示例</title>
<style>
video {
width: 400px;
}
</style>
</head>
<body>
<!-- 浏览器加载页面 , 发现 video 标签
读取该 video 标签 , 发现第一个 source 字标签 , 该标签配置 mp4 视频文件
- 如果浏览器支持 mp4 就播放该 mp4 文件
- 如果不支持 mp4 格式 , 则继续读取下一行
第二个 source 标签配置的是 ogg 格式的视频文件
- 如果浏览器支持 ogg 就播放该 ogg 文件
- 如果不支持 ogg 格式 , 则继续读取下一行 显示提示信息 -->
<video autoplay="autoplay" muted="muted" loop="loop" poster="media/pig.jpg">
<source src="media/fengjing.mp4" type="video/mp4" />
<source src="media/fengjing.ogg" type="video/ogg" />
很抱歉 , 当前浏览器不支持现有视频格式 ~
</video>
</body>
</html>
Results of the :
