扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了“HTML5 video标签的使用技巧有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML5 video标签的使用技巧有哪些”吧!
创新互联建站专注于企业营销型网站、网站重做改版、石鼓网站定制设计、自适应品牌网站建设、H5场景定制、成都商城网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为石鼓等各大城市提供网站开发制作服务。
第一步:使用标签
使用的方法很简单,就是一句代码:
复制代码
代码如下:
第二步:加上一些必要的参数,比如播放视频的路径、是否显示控制条
要播放视频那就必须要视频的地址,也就是要在标签中设置src属性。刚开始的时候做不了自己定义的控制条,那么就先用浏览器默认的,加上controls即可,于是就变成了这样:
复制代码
代码如下:
第三步:让视频自动播放或自动加载
用播放器经常需要做到的一点就是,页面加载了就开始播放视频,那么需要设置视频自动播放,也就是设置autoplay属性。
复制代码
代码如下:
有时候为了用户的一些习惯却不需要自动播放,但是为了让用户能够快速能看到视频,所以需要让视频自动加载,那么就需要设置preload属性,需要注意的是这个并不会完整的加载这个视频,而是只会加载前面的一部分。
复制代码
代码如下:
第四步:让播放器规范一点
什么叫让播放器规范一点?那就是有控制条(前面已经介绍了)、开始播放前看到的画面,规定播放器的大小。
播放器如果加载到了视频是可以在一开始就看到一个初始化的画面,但是往往会有这样的要求,给视频设置视频开始看到的图片(有时候为了吸引观众,会搞一张跟视频关系不大的图片,你懂的),或者是因为考虑网络问题,在还没加载视频的情况下不要显示一个黑屏给观众,这个时候也需要做这么一个设置,那就是设置poster属性即可:
复制代码
代码如下:
一般来说在应用过程中,播放器都是规定大小,所以要设置播放器的长宽,可以通过样式表里面设置,也可以通过属性width height来设置。需要注意的是设置播放器的宽高需要根据视频的比例来设置,否则最后看到视频是有空白,如果播放器的宽高超过视频的像素可看到模糊的拉伸效果,所以在设置宽高的时候一定要注意,不过可以先只设置宽或者高来观察,再得出准确的像素,比如
复制代码
代码如下:
在设置好宽度后,在浏览器中调试工具中看到了自适应的高度是165,那么这个时候再设置高度为165
复制代码
代码如下:
感谢各位的阅读,以上就是“HTML5 video标签的使用技巧有哪些”的内容了,经过本文的学习后,相信大家对HTML5 video标签的使用技巧有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流