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实现Material Design效果
Mar 09 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
我的论坛源代码(一)
2006/10/09 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
php生成短网址示例
2014/05/05 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
Python的subprocess模块总结
2014/11/07 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
绩效管理实施方案
2014/03/19 职场文书
中药学专业求职信
2014/05/31 职场文书
广告业务员岗位职责
2015/02/13 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers