第三讲 HTML5 视频播放事件属性及自己做的一个简单的html5的视频

来源：互联网发布：淘宝买大麻种子犯法吗编辑：程序博客网时间：2024/06/04 20:11

1、视频格式的简单介绍

视频格式：avi、rmb、wmv、mpeg4、ogg、webm

在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了

HTML5支持的格式：

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

2、HTML5视频标签<video>属性

浏览器不支持HTML5的视频播放功能

</video>

</video>

3.HTML5视频标签<video>属性

属性值描述

autoplay autoplay如果出现该属性，则视频在就绪后马上播放。

controls controls如果出现该属性，则向用户显示控件，比如播放按钮。

height pixels设置视频播放器的高度。

loop loop如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload preload如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src url 要播放的视频的 URL。

width pixels设置视频播放器的宽度。

*******************************************************下面是自己写的一个html5简单的视频

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
var video = $('#php100');//指定了对象
$('#play').click(function () {
video[0].play();
})
$('#pause').click(function () {
video[0].pause();
})
$('#go10').click(function () {
video[0].currentTime += 10;
})
$('#back10').click(function () {
video[0].currentTime -= 10;
})
$('#rate1').click(function () {
video[0].playbackRat+=2;
})
$('#rate0').click(function () {
video[0].playbackRat -=2;
})

$('#volumel').click(function () {
video[0].volume += 0.1;
})
$('#volume0').click(function () {
video[0].volume -= 0.1;
})
$('#muted1').click(function () {
video[0].muted = true;
})
$('#muted1').click(function () {
video[0].muted = false;
})
$("#full").click(function () {
video[0].webkitEmterFullscreen();//webkit类型的浏览器
video[0].mozRequestFullScreen();//支持火狐浏览器

})
})

</script>
</head>
<body>
<video id="php100" src="vi/21.mp4" width="400" controls="controls" poster="images/loding.jpg">
<source src="video.webm" type="video/webm"/>//
<source src="video.ogv" type="audio/ogg"/>
<source src="vi/21.mp4" type="audio/mp4" />
您的浏览器不支持html5
</video>
<hr />
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="go10">快进10秒</button>
<button id="back10">快退10秒</button>
<button id="rate1">播放速度+</button>
<button id="rate0">播放速度—</button>
<button id="volumel">声音+</button>
<button id="volume0">声音-</button>
<button id="muted1">静音</button>
<button id="muted2">解除静音</button>
<button id="full">全屏</button>

</body>
</html>