html5标签video(播放器)学习笔记(一)-初始化的工作

最近有在学习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来控制了。

时间: 2024-10-06 00:30:49

html5标签video(播放器)学习笔记(一)-初始化的工作的相关文章

html5标签video(播放器)学习笔记(二)-基本操作

subying 发布时间: 2014/12/01 23:59 阅读: 13008 收藏: 21 点赞: 3 评论: 0 摘要 本文介绍了html5标签video(播放器)的一些基本操作,主要是通过JS来监听video的事件和对video属性的读写来完成的,本文用了简单的例子进行引导说明,简单的JS代码讲解video的一些基本操作. 上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对v

HTML5环形音乐播放器

通过 HTML5,音乐在网络上东山再起.添加音频文件就像插入图像那样简单,并且用户能在浏览器外播放音乐,从而实现惊人的音乐体验.<audio> 标签的推出使您不再需要外部音乐播放器,在网站上实现真正的声音融合. 随着 HTML5 的出现,发生了一些重大变化,特别是在音乐和音频方面.开发人员不再要求 web 冲浪者使用 Adobe Flash.Apple QuickTime 或 Microsoft Windows 媒体播放器等特殊的播放器.这意味着用户不必担心是否有最新的兼容插件(或任何播放器插

模拟video播放器

本以为写一个video播放器不难,可写着写着坑就越挖越大了. 先看一下播放器大概是长这样的: 在开发过程中这几个问题深深地困扰着我: 1.各机器兼容问题 2.关于视频播放过程中进度条显示情况 3.关于改变播放进度和音量大小的操作问题 1.各机器兼容问题 除了chrome很乖支持良好外,其中UC获取不到duration属性,也就获取不到视频的总长度了,但这部分可以由后台传参数解决,但是不能禁用系统播放器这个就不太好了.... 抛开其它浏览器,来看看腾讯X5内核的浏览器的支持情况:http://x5

HTML5动画图片播放器 高端大气

我们见过很多图片播放插件(焦点图),很多都基于jQuery.今天介绍的HTML5图片播放器很特别,它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动.打散.重新组合等.这款HTML5动画图片播放器算得上是高端大气上档次. 在线演示源码下载 转载自:http://www.html5tricks.com/html5-image-player-with-animation.html HTML5动画图片播放器 高端大气

Linux学习笔记(6)-工作管理

什么是工作管理 工作来自job命令的翻译,job命令可以查看后台工作的进程.举例来说什么是工作管理,当你要打包一个比较大的目录时,很耗时间,但是你同时又需要使用别的命令.你会想我可以到开几个终端进行登录.在/etc/security/limits.conf里面可以设定使用者同时可以登入的连接数,如果设为1,那不是没辙了?由于耗时的打包命令并不需要与用户进行交互,可不可以让程序在后台打包呢?答案是可以的. 将进程放入后台运行 使用"&"符号让命令在后台工作 #tar -zcf e

html5新媒体播放器标签video、audio 与embed、object

html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是所有的浏览器都支持.video虽然号称可以支持三种媒体类型,但常用的只有mp4. 像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本上一样的, 1. video.audio可以看我的另一篇文章https://www.cnblogs.com/jing-tian/p/10930

一个基于html5的video视频播放器

html5的video标签使得加载视频方便了许多,上午无事,做了一个小demo,包含了一些很基本的功能.播放,进度这些.主要是了解一下相关api. html: <!-- 视频 1 --> <div class="vsb-container" containerID="1" columns="1"> <div class="vsb-space sec_side_10 mb15 fluid clear"

&lt;object&gt;标签引入播放器

我们在网页上看到的播放器无外乎WMP/RealOne/Macromedia Flash Player,其他的无非是面板不同,或添加了其他控件,对于计算机上安装的一些播放器也都是编码和解码器的整合,其最核心的编码和解码技术是相同的.例如:网络上最流行的windows media流(asf,wma,wmv格式...),Real流(rm,rmvb...),更有MPEG系列编码格式(MP4/MP3格式...) 视窗系统 Media Video 是微软推出的一种流媒体格式,他是在“同门”的ASF(Adva

HTML5网页音乐播放器

1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放暂停.上一首和下一首 2.调整音量和播放进度条 3.根据列表切换当前歌曲 先来看一下最终的完成效果: 这个音乐播放器的结构主要分为三部分:歌曲信息.播放器和播放列表,我们重点介绍一下播放器部分.首先在播放器中放三个audio标签用于播放: <audio id="music1">