php video标签使用方法,HTML_HTML5 video标签（播放器）学习笔记（一）:使用入门，近有在学习html5中video标签（播

HTML5 video标签(播放器)学习笔记(一):使用入门

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

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

本文目录:

1.使用标签

2.加上一些必要参数

3.自动播放或自动加载

4.规范播放器

第一步：使用标签

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

复制代码代码如下:

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

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

复制代码代码如下:

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

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

复制代码代码如下:

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

复制代码代码如下:

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

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

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

复制代码代码如下:

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

复制代码代码如下:

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

复制代码代码如下:

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

android读取短信示例分享

Win7系统升级VirtualBox后无法打开新任务错误代码0x80004005

Windows Server新预览版2015年春季发布

详解ABP框架中领域层的领域事件Domain events

php中通过DirectoryIterator删除整个目录的方法

禁用Win10透明化界面的注册表修改方法

探析浏览器执行JavaScript脚本加载与代码执行顺序

PHP7.0安装笔记整理

易操作的jQuery表单提示插件

sql 2000 无法执行查询,因为一些文件缺少或未注册"的解决方法

MYSQL数据库使用UTF-8中文编码乱码的解决办法

Win10 Mobile一周年更新正式版14393.67上手体验

smarty模板局部缓存方法使用示例

详解Java的Struts2框架的结构及其数据转移方式

php video标签使用方法,HTML_HTML5 video标签（播放器）学习笔记（一）:使用入门，近有在学习html5中video标签（播 - phpStudy...相关推荐

HTML5新增的video标签,HTML5中video标签的使用方法
HTML5中video标签的使用方法发布时间:2020-08-27 11:33:56 来源:亿速云阅读:100 作者:小新这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...
vue3-video-play视频组件的使用（一）——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...
解决html5中video标签无法播放mp4问题的办法
解决html5中video标签无法播放mp4问题的办法参考文章: (1)解决html5中video标签无法播放mp4问题的办法 (2)https://www.cnblogs.com/it-tsz/p ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
CSS中的长度单位和HTML5中多媒体标签的使用
CSS中的长度单位和HTML5中多媒体标签的使用第一部分.长度单位 1.基本长度单位 2.长度单位的换算第二部分.vw.vh.vmin.vmax 1.vw.vh.vmin.vmax的含义 2.vw ...
php中的ol标签,html5中ol标签的用法详解
这篇文章主要介绍了详解HTML5中ol标签的用法,是HTML5入门学习中的基础知识,需要的朋友可以参考下定义和用法标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异在 HTML ...
HTML中可以有多个meta吗,HTML5中meta标签有三个主要属性是什么
HTML5中meta标签有三个主要属性是什么发布时间:2020-10-22 13:46:11 来源:亿速云阅读:88 作者:小新小编给大家分享一下HTML5中meta标签有三个主要属性是什么,相 ...
关于html5中section标签与div标签的区别
关于html5中section标签与div标签的区别本篇文章主要的想大家介绍了关于HTML5 section标签和div标签的区别,section和div的用法看似相近,实则差的也不是太多,有些地方 ...
HTML5中video标签与canvas绘图的使用
原文:https://www.cnblogs.com/zhuzhenwei918/p/6822834.html video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下 ...

php video标签使用方法,HTML_HTML5 video标签（播放器）学习笔记（一）:使用入门，近有在学习html5中video标签（播 - phpStudy...

php video标签使用方法,HTML_HTML5 video标签（播放器）学习笔记（一）:使用入门，近有在学习html5中video标签（播 - phpStudy...相关推荐

最新文章

热门文章