小强的HTML5移动开发之路(14)——Video标签详解
2015-09-24 13:48
706 查看
来自:http://blog.csdn.net/dawanganban/article/details/18180605
在前面的小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器中制作了一个非常好用的播放器,有的朋友对其中的原理还不是很了解,这一篇文章将在前一篇的基础上深入剖析<video>标签的使用。
一、使用技巧
在html5中可以使用<audio>或者<video>标签播放html5媒体,使用方式如下:
<video src="move.mp4"></video>
video标签中有很多属性,例如controls属性可以控制是否有控制台。
<video src="move.mp4" controls="controls">
浏览器不支持HTML5的视频播放功能
</video>
从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式,这样我们可以采用<source>标签指定多种格式的视频,默认情况下浏览器会自动启动下载文件来确定其类型。<video width="400" controls="controls">
<source src="move.mp4" type="video/mp4" />
<source src="move.ogg" type="video/ogg" />
</video>
二、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>
在前面的小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器中制作了一个非常好用的播放器,有的朋友对其中的原理还不是很了解,这一篇文章将在前一篇的基础上深入剖析<video>标签的使用。
一、使用技巧
在html5中可以使用<audio>或者<video>标签播放html5媒体,使用方式如下:
<video src="move.mp4"></video>
video标签中有很多属性,例如controls属性可以控制是否有控制台。
<video src="move.mp4" controls="controls">
浏览器不支持HTML5的视频播放功能
</video>
从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式,这样我们可以采用<source>标签指定多种格式的视频,默认情况下浏览器会自动启动下载文件来确定其类型。<video width="400" controls="controls">
<source src="move.mp4" type="video/mp4" />
<source src="move.ogg" type="video/ogg" />
</video>
video标签支持HTML5中的全局属性和事件属性
特有属性如下:
大多数浏览器支持的视频方法、属性事件
注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。
三、从实例中了解Video标签的使用特有属性如下:
属性 | 值 | 描述 |
---|---|---|
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 |
<!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>
相关文章推荐
- 简单介绍HTML5中audio标签的使用
- html5中关于input用法的改变
- 深入理解HTML5:语义、标准与样式
- html5 canvas 学习笔记
- html5input保留2位小数
- html5多媒体组件API
- HTML5 audio与video标签实现视频播放,音频播放
- h5 canvas 在canvas上画图 在canvas上写字 文字换行
- H5性能优化方案
- html5中 data-*属性详解
- 让老版本IE支持HTML5
- html5
- html5基础(第一天)
- HTML5
- html5基础
- html5基础
- Html5常用语义标签、拖拽功能、音频、视频总结
- HTML5
- html5
- html5