1.检测浏览器是否支持html5视频播放
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function checkVideo()
{
if(!!document.createElement('video').canPlayType)
{
var vidTest=document.createElement("video");
oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h264Test)
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器不支持HTML 5视频播放！"
}
else
{
if (h264Test=="probably")
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持HTML 5视频播放！";
}
else
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持部分HTML 5视频播放！";
}
}
}
else
{
if (oggTest=="probably")
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持HTML 5视频播放！";
}
else
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器支持部分HTML 5视频播放！";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="您的浏览器不支持HTML 5视频播放！"
}
}
</script>
<title>3.3.1</title>
</head>
<body>
<div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;">
<button onclick="checkVideo()" style="font-family:Arial, Helvetica, sans-serif;">检测</button>
</div>
</body>
</html>
2.视频里面的标签
1. autoplay 自动播放视频文件
<audio scc=".ogg .mp4 .webm" autoplay></span>
2.preload 预加载。提供三个可供选择的值：none表示不进行预加载；metadata表示仅加载元数据，即音频文件的大小、第一帧、播放列表和持续时间等；auto表示预加载全部音频文件
<audio scc=".ogg .mp4 .webm" preload=”metadata”></audio>
3.poster元素
设置当前元素不可用时，可以向用户展现一副图片
<video scc=".ogg .mp4 .webm" poster=“.jpg”></video >
4.loop元素
设置是否循环播放视频文件
<video scc=".ogg .mp4 .webm" loop></ ideo >
5.controls属性
设置是否添加浏览器自带的播放控制器，其中包括播放、暂停、声音等。如果需要显示播放控制器，则添加该属性
<video scc=".ogg .mp4 .webm" controls></video >
6.width属性和height属性
设置视频的宽度和高度
<video scc=".ogg .mp4 .webm" width=”” height=””></video >
7.muted属性
设置页面加载时，播放器是否被静音。
3 vioeo/audio方法标签
1、play方法
除了播放器自己的播放功能外，用户还可以在脚本中使用play方法来控制音视频的播放功能
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3.5.1</title>
<script>
function play()
{
var video=document.getElementById("MyVideo");
video.play();
}
</script>
</head>
<body>
<video id="MyVideo" src="movie.mp4" controls></video>
<button onClick="play()">play</button>
</body>
</html>
显 示
2.pause方法
与play方法对应的pause方法用于设置暂停播放音视频功能，pause方法也需要在脚本中设置才能使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3.5.2</title>
<script>
function pause()
{
var video=document.getElementById("MyVideo");
video.pause();
}
</script>
</head>
<body>
<video id="MyVideo" src="movie.mp4" controls></video>
<button onClick="pause()">pause</button>
</body>
</html>
3.load方法
调用该方法可以重新加载音视频文件进行播放
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3.5.3</title>
<script>
function load()
{
var video=document.getElementById("MyVideo");
video.load();
}
</script>
</head>
<body>
<video id="MyVideo" src="movie.mp4" controls></video>
<button onClick="load()">load</button>
</body>
</html>
4.canPlayType方法
该方法用于检测浏览器是否支持指定的类型，并返回结果。如果返回空字符串则表示浏览器不支持此种功能
4.打开页面后，视频开始循环播放，当暂停时，在视频上方出现一个图片遮挡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3.4.1</title>
<script>
var video;
var img;
function init()
{
video=document.getElementById("MyVideo");
video.style.position="absolute";
video.style.width="400px";
video.style.height="300px";
video.style.left="50px";
video.style.top="50px"; img=document.getElementById("MyImg");
img.style.position="absolute";
img.style.width="340px";
img.style.height="160px";
img.style.left="80px";
img.style.top="120px";
img.style.zIndex=2;
img.hidden=true;
}
function showImg(flag)
{
img.hidden=flag;
}
</script>
</head>
<body onLoad="init()">
<video id="MyVideo" loop autoplay src="movie.mp4" controls onPlay="showImg(true);" onPause="showImg(false);" ></video>
<img id="MyImg" src="MyImage.png" />
</body>
</html>
显示结果
