video标签可以通过简单的属性设置来进行视频播放,我们初学可以先做简单学习,但是高级操作就需要video对象来完成高阶玩法
目录
一、参考资料
1.1文档
1..2视频
详解video对象,看完必会,你也能写一个视频播放器(一)_哔哩哔哩_bilibili
详解video对象,看完必会,你也能写一个视频播放器(二)_哔哩哔哩_bilibili
详解video对象,看完必会,你也能写一个视频播放器(三)_哔哩哔哩_bilibili
详解video对象,看完必会,你也能写一个视频播放器(四)_哔哩哔哩_bilibili
二、简单使用
<video src="video.mp4" controls="controls"> 您的浏览器不支持 video 标签。 </video>
三、标签属性
属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 规定视频的音频输出应该被静音。 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
3.1使用案例
<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>