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


Posted in HTML / CSS onApril 24, 2015

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

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

本文目录:

1.使用标签
2.加上一些必要参数
3.自动播放或自动加载
4.规范播放器 

第一步:使用标签

使用的方法很简单,就是一句代码:

复制代码
代码如下:

<video></video>

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

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

复制代码
代码如下:

<video controls src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

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

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

复制代码
代码如下:

<video controls autoplay=true src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

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

复制代码
代码如下:

<video controls preload="auto" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

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

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

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

复制代码
代码如下:

<video controls preload="auto" poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" width="640" height="264" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

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

<video controls preload="auto" width=300 poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

在设置好宽度后,在浏览器中调试工具中看到了自适应的高度是165,那么这个时候再设置高度为165
复制代码
代码如下:

<video controls preload="auto" width=300 height=165 poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4"></video>

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

HTML / CSS 相关文章推荐
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 #HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 #HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 #HTML / CSS
微信浏览器取消缓存的方法
Mar 28 #HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 #HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 #HTML / CSS
HTML5学习笔记之History API
Feb 26 #HTML / CSS
You might like
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python 闭包的使用方法
2017/09/07 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
财政局长自荐信范文
2013/12/22 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
钱学森电影观后感
2015/06/04 职场文书
python单元测试之pytest的使用
2021/06/07 Python