在前面的小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器中制作了一个非常好用的播放器,有的朋友对其中的原理还不是很了解,这一篇文章将在前一篇的基础上深入剖析<video>标签的使用。
一、使用技巧
在html5中可以使用<audio>或者<video>标签播放html5媒体,使用方式如下:
-
<videosrc="move.mp4"></video>
video标签中有很多属性,例如controls属性可以控制是否有控制台。
-
<videosrc="move.mp4"controls="controls">
-
浏览器不支持HTML5的视频播放功能
-
</video>
从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式,这样我们可以采用<source>标签指定多种格式的视频,默认情况下浏览器会自动启动下载文件来确定其类型。
-
<videowidth="400"controls="controls">
-
<sourcesrc="move.mp4"type="video/mp4"/>
-
<sourcesrc="move.ogg"type="video/ogg"/>
-
</video>
二、Video标签的属性
video标签支持HTML5中的全局属性和事件属性
特有属性如下:
属性
值
描述
autoplay |
autoplay |
如果出现该属性,则视频在就绪后马上播放。 |
controls |
controls |
如果出现该属性,则向用户显示控件,比如播放按钮。 |
height |
pixels |
设置视频播放器的高度。 |
loop |
loop |
如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload |
preload |
如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
|
src |
url |
要播放的视频的 URL。 |
width |
pixels |
设置视频播放器的宽度。 |
大多数浏览器支持的视频方法、属性事件
方法
属性
事件
play() |
currentSrc |
play |
pause() |
currentTime |
pause |
load() |
videoWidth |
progress |
canPlayType |
videoHeight |
error |
|
duration |
timeupdate |
|
ended |
ended |
|
error |
abort |
|
paused |
empty |
|
muted |
emptied |
|
seeking |
waiting |
|
volume |
loadedmetadata |
|
height |
|
|
width |
|
注释:在所有属性中,只有
videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。
三、从实例中了解Video标签的使用
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center;">
<!--定义按钮,并添加事件监听函数-->
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="420" style="margin-top:15px;">
<source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
<source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />
<source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />
<p>您的浏览器不支持此HTML5标签</p>
</video>
</div>
<script type="text/javascript">
//得到video标签对象
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
分享到:
相关推荐
尤其是有洁癖的人更是如此,总是喜欢时不时的杀进程杀服务,可是由于android开源的特殊性,你会发现被干掉的服务又一次的重新复活了,总之生命力极其强悍,业界称之为——打不死的小强。这里是它怎么做的,哈哈
小强老师《零基础学习软件测试》系列视频之QTP使用指南——界面分析
“小强一号”——实验机器人制作过程(图文.docx
小强老师《零基础学习软件测试》系列视频之QTP使用指南
小强的HTML5移动开发之路系列博客中的一个视频播放器的例子。
小强老师《零基础学习软件测试》系列视频之QTP使用指南
详细请看《 小强的HTML5移动开发之路(42)》:http://blog.csdn.net/column/details/dawanganban-html5.html
linux常用命令详解(小强提供).pdf
说明:本实验环境全部采用TL-WA501G+型号无线Ap 其他型号Ap在配置中可能存在差异,但其思想不变 本手册由小强实测整理,仅供大家参考!
里面有小强开发板程序,对初学者有很大帮助
小强老师软件测试基础课程5-软件质量基础知识
video内容大小和video实际大小不一致 - 副本 https://mp.csdn.net/mdeditor/100134528#
小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换
小强影音盒是一个在线电影和视频播放器,能播放网上的海量电影。如果想看最新版本到:http://www.5aie.com/xiaoqiangplayer/flvshuoming.htm 查看。
小强多个模版替换 快速发布信息,让你的工作更有效率。
小强开发板原理图版本,在网上是很不好找到的 ,不过需要的人可能也不多
小强通话时间统计,显示归属地,统计指定号码通话时间