The video tag can play video through simple attribute settings. We can do simple learning for beginners, but advanced operations require video objects to complete advanced gameplay
Table of contents
1. Reference materials
1.1 Documentation
1..2 video
2. Easy to use
<video src="video.mp4" controls="controls">
您的浏览器不支持 video 标签。
</video>3. Label properties
| Attributes | value | describe |
|---|---|---|
| autoplay | autoplay | If present, the video plays as soon as it is ready. |
| controls | controls | If present, controls are displayed to the user, such as a play button. |
| height | pixels | Set the height of the video player. |
| loop | loop | If present, playback starts again when the media file has finished playing. |
| muted | muted | Specifies that the audio output of the video should be muted. |
| poster | URL | Specifies the image to display while the video is downloading, or before the user clicks the play button. |
| preload | preload | If this attribute is present, the video is loaded on page load and ready to play. This attribute is ignored if "autoplay" is used. |
| src | url | The URL of the video to play. |
| width | pixels | Sets the width of the video player. |
3.1 Use Cases
<video
id="video"
src="video.mp4" /*视频地址*/
controls = "true" /*是否显示播放控件*/
poster="images.jpg" /*视频封面*/
preload="auto" /*预加载*/
webkit-playsinline="true" /*IOS中让视频在小窗内播放而不是全屏播放*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x-webkit-airplay="allow" /*是否支持ios的AirPlay功能*/
x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
x5-video-player-fullscreen="true" /*设置为true防止横屏*/
x5-video-orientation="portraint" /*播放器的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
style="object-fit:fill">
</video>