HTML 5 引入原生态的多媒体支持,可在浏览器中直接播放音频和视频文件,不需要借助视频插件播放音频和视频;
1. 音频标签 <audio>
audio 标签的主要属性如下:
- src:音频文件的 URL,必填;
- controls:音频就绪后包含播放/暂停按钮的控件;
- autoplay:音频就绪后自动播放;
- loop:每当音频结束时重新开始循环播放;
- muted:静音;
例子:HTML 5 音频播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 5 音频播放</title>
</head>
<body>
<audio src="images/示例音乐.mp3" controls="controls" autoplay="autoplay" loop="loop" id="MyAudio"></audio>
<input type="button" value="静音" onClick="playControll()" id="jy" />
</body>
<script>
function playControll(){
if(!MyAudio.muted){
MyAudio.muted = true;
jy.value="播放";
}else{
MyAudio.muted=false;
jy.value="静音";
}
}
</script>
</html>
2. 视频标签 <video>
成对标签 用来在页面的视频播放,支持MP4、webm 和 ogg 三个视频格式; video 标签具有 src、controls、autoplay 和 loop 等属性,其含义跟 audio 标签属性相同; 例子:HTML 5 视频播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> HTML 5 视频播放</title>
<style>
*{
margin: 0;padding: 0;
}
video{
width: 300px;height: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<video src="images/1212.mp4" autoplay="autoplay" controls="controls" loop="loop"></video>
</body>
</html>
3. 网页视频播放只有声音没有画面解决执法
视频没有画面解放方法
|