近有在学习html5中video标签（播放器）的使用，这里做一些学习笔记，方便自己查阅和记录，本文是第一篇，将介绍的是使用该标签初始化该做的哪些工作。
网上的教程其实也不少了 w3cschool里面的最为简单而详细，那么这几介绍的是一些更为直接的应用。
本文目录:
1.使用标签
2.加上一些必要参数
3.自动播放或自动加载
4.规范播放器
第一步：使用标签
立即学习“前端免费学习笔记（深入）”；
使用的方法很简单，就是一句代码：
复制代码代码如下:
第二步：加上一些必要的参数，比如播放视频的路径、是否显示控制条
要播放视频那就必须要视频的地址，也就是要在标签中设置src属性。刚开始的时候做不了自己定义的控制条，那么就先用浏览器默认的，加上controls即可，于是就变成了这样：
复制代码代码如下:
第三步：让视频自动播放或自动加载
用播放器经常需要做到的一点就是，页面加载了就开始播放视频，那么需要设置视频自动播放，也就是设置autoplay属性。
复制代码代码如下:
有时候为了用户的一些习惯却不需要自动播放，但是为了让用户能够快速能看到视频，所以需要让视频自动加载，那么就需要设置preload属性，需要注意的是这个并不会完整的加载这个视频，而是只会加载前面的一部分。
复制代码代码如下:
第四步：让播放器规范一点
什么叫让播放器规范一点？那就是有控制条（前面已经介绍了）、开始播放前看到的画面，规定播放器的大小。
播放器如果加载到了视频是可以在一开始就看到一个初始化的画面，但是往往会有这样的要求，给视频设置视频开始看到的图片（有时候为了吸引观众，会搞一张跟视频关系不大的图片，你懂的），或者是因为考虑网络问题，在还没加载视频的情况下不要显示一个黑屏给观众，这个时候也需要做这么一个设置，那就是设置poster属性即可：
复制代码代码如下:
一般来说在应用过程中，播放器都是规定大小，所以要设置播放器的长宽，可以通过样式表里面设置，也可以通过属性width height来设置。需要注意的是设置播放器的宽高需要根据视频的比例来设置，否则最后看到视频是有空白，如果播放器的宽高超过视频的像素可看到模糊的拉伸效果，所以在设置宽高的时候一定要注意，不过可以先只设置宽或者高来观察，再得出准确的像素，比如
复制代码代码如下:
在设置好宽度后，在浏览器中调试工具中看到了自适应的高度是165，那么这个时候再设置高度为165
复制代码代码如下:
总结：通过这四个步骤，可以完成了一个播放器的基本设置和使用了，主要是要了解播放器的一些属性和应用的场合，更多的应用那就要通过JS来控制了。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2913523.html
