HTML5 规定了一种通过 video 元素来包含视频的标准方法。
目前视频都是使用flash组件来显示的。html5使用了video组件来包含视频。
video组件可以支持3中格式的视频包括oog,MP4,webm三种格式。
一个可以播放的简单视频需要包括
<video 组件的宽高 src="视频文件地址" 视频播放方式属性></video>
但是并不是每个浏览器都会支持一种视频格式,有时候我们需要把三种视频格式都写出来,组件会播放第一个支持的视频文件。
对于视频播放方式的属性也是一个视频组件中必须的,没有播放方式的属性视频是不能正常播放的。
一共有两种播放方式:1. 通过播放按钮进行视频的播放和暂停。controls这个属性,可以使这个视频组件拥有进度条,开始暂停按钮,音量调节按钮。
2.就绪后直接播放该视频,使用autoplay 属性。
同时我们可以发现有些视频在播放结束后重复播放,这是由于设置了loop属性。
下面展示一个比较简单的视频播放的html5的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video width="250" height="300" autoplay="autoplay" loop="loop">
<!--
作者:SmallPeas
时间:2016-09-22
描述:给定宽高为250,300 播放方式为直接重复播放。通过source 给控件两种格式的视频,防止流量器不支持oog格式
-->
<source src="/i/movie.ogg" type="audio/ogg"></source>
<source src="/i/movie.mp4" type="audio/mp4"></source>
</video>
</body>
</html>
具体请参考w3cschool网站
同时video组件也可以使用JAVASplit进行控制:
具体给出一个使用实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div style="text-align:center">
<button οnclick="playPause()">播放/暂停</button>
<button οnclick="makeBig()">放大</button>
<button οnclick="makeSmall()">缩小</button>
<button οnclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
</div>
<script>
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>
由于本人对JavaScript不是很熟悉,仅此在此提一下。