html5视频播放器脚本怎么用,HTML5 video标签（播放器）学习笔记（一）:使用入门...

近有在学习html5中video标签(播放器)的使用，这里做一些学习笔记，方便自己查阅和记录，本文是第一篇，将介绍的是使用该标签初始化该做的哪些工作。

网上的教程其实也不少了 w3cschool里面的最为简单而详细，那么这几介绍的是一些更为直接的应用。

本文目录:

1.使用标签

2.加上一些必要参数

3.自动播放或自动加载

4.规范播放器

第一步：使用标签

使用的方法很简单，就是一句代码：

复制代码代码如下:

第二步：加上一些必要的参数，比如播放视频的路径、是否显示控制条

要播放视频那就必须要视频的地址，也就是要在标签中设置src属性。刚开始的时候做不了自己定义的控制条，那么就先用浏览器默认的，加上controls即可，于是就变成了这样：

复制代码代码如下:

第三步：让视频自动播放或自动加载

用播放器经常需要做到的一点就是，页面加载了就开始播放视频，那么需要设置视频自动播放，也就是设置autoplay属性。

复制代码代码如下:

有时候为了用户的一些习惯却不需要自动播放，但是为了让用户能够快速能看到视频，所以需要让视频自动加载，那么就需要设置preload属性，需要注意的是这个并不会完整的加载这个视频，而是只会加载前面的一部分。

复制代码代码如下:

第四步：让播放器规范一点

什么叫让播放器规范一点？那就是有控制条(前面已经介绍了)、开始播放前看到的画面，规定播放器的大小。

播放器如果加载到了视频是可以在一开始就看到一个初始化的画面，但是往往会有这样的要求，给视频设置视频开始看到的图片(有时候为了吸引观众，会搞一张跟视频关系不大的图片，你懂的)，或者是因为考虑网络问题，在还没加载视频的情况下不要显示一个黑屏给观众，这个时候也需要做这么一个设置，那就是设置poster属性即可：

复制代码代码如下:

一般来说在应用过程中，播放器都是规定大小，所以要设置播放器的长宽，可以通过样式表里面设置，也可以通过属性width height来设置。需要注意的是设置播放器的宽高需要根据视频的比例来设置，否则最后看到视频是有空白，如果播放器的宽高超过视频的像素可看到模糊的拉伸效果，所以在设置宽高的时候一定要注意，不过可以先只设置宽或者高来观察，再得出准确的像素，比如

复制代码代码如下:

在设置好宽度后，在浏览器中调试工具中看到了自适应的高度是165，那么这个时候再设置高度为165

复制代码代码如下:

总结：通过这四个步骤，可以完成了一个播放器的基本设置和使用了，主要是要了解播放器的一些属性和应用的场合，更多的应用那就要通过JS来控制了。

html5视频播放器脚本怎么用,HTML5 video标签（播放器）学习笔记（一）:使用入门...相关推荐

mp4 格式无法使用html5的video标签播放
只有视频编码为h264的视频才能在html5中使用video标签播放我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px; 转载于:https://www.cnblogs ...
Chromium为视频标签video创建播放器的过程分析
Chromium是通过WebKit解析网页内容的.当WebKit遇到<video>标签时,就会创建一个播放器实例.WebKit是平台无关的,而播放器实现是平台相关的.因此,WebKit并没 ...
去除/屏蔽安卓/Android手机的 qq浏览器微信H5使用video标签播放视频，结束后的视频广告
今天是个好日子老干妈炖大鹅的好日子 X5内核是腾讯基于优秀开源Webkit深度"优化并加工"的浏览器渲染引擎微信和手机qq都是还有一些就不细说了 x5内核会监管vid ...
html 中利用video标签播放mp4文件
如下是一个简单的html 中,用video标签播放mp4视频的示例: 点击视频即可进行播放 <html><head><title>camera</title& ...
H5播放HLS之video标签播放
视频推流为了产生HLS视频,我们可以借助srs来实现rtmp推流并生成HLS流,具体详细使用可以参考我之前的文章,这里不再赘述. 我们要实现web端播放传统的音视频,最重要的实现就是rtmp实时视频 ...
Video 标签播放 m3u8 格式视频
在不借助流媒体播放器的前提下,直接播放 m3u8 格式的视频文件更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线写在前面的话为什么要播放 m3u8 格式的视频对于一 ...
开发个好的RTMP播放器到底难在哪里？RTMP播放器对标和考察指标
好多开发者提到,RTMP播放器,不知道有哪些对标和考察指标,以下大概聊聊我们的一点经验,感兴趣的,可以关注 github: 1. 低延迟:大多数RTMP的播放都面向直播场景,如果延迟过大,严重影响体验 ...
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
vue使用原生video标签播放视频
页面效果如下图如果想实现自动播放,需要加autoplay属性, 但是加了之后也可能出现无法自动播放的问题,还需要在加muted属性 muted 是静音属性添加了以后会自动播放但是没有声音怎么 ...

html5视频播放器脚本怎么用,HTML5 video标签（播放器）学习笔记（一）:使用入门...

html5视频播放器脚本怎么用,HTML5 video标签（播放器）学习笔记（一）:使用入门...相关推荐

最新文章

热门文章