(1)video视频:引video的方法类似img,使用src引视频地址,controls 显示控件;autoplay自动播放;loop单曲循环;视频类型ogg,mp4(一般多用MP4)。
1.简单引用video:其中只引入video的情况下,鼠标右键点击显示控件即可播放。
2.添加适当的控制代码,可调 的代码有两种方式
① 在内部引入src的视频地址
```
<video src="bbb.ogg" controls autoplay loop width="500" height="300"></video>
```
② 在代码内部添加 source 引入视频地址
···
<video controls autoplay loop width="500" height="400" >
<source src="1.mp4"/>
</video>
···
注意:其中一定要设置宽和高,这样才会有视频。默认状态下是无宽高的。
3.video 可以使用js更好的完善控制,例如变大,变小,暂停,播放,暂停/播放,全屏
```
<script>
window.onload= function(){
var aBtn = document.getElementsByTagName('input');
var oV = document.getElementById('v1');
//变大800*600
aBtn[0].onclick = function(){
oV.width = 800;
oV.height = 600;
}
//变小
aBtn[1].onclick = function(){
oV.width = 200;
oV.height = 200;
}
//播放
aBtn[2].onclick = function(){
oV.play();
}
//暂停
aBtn[3].onclick = function(){
oV.pause();
}
aBtn[4].onclick = function(){
if(oV.paused){
oV.play();
}else{
oV.pause();
}
}
aBtn[ 5].onclick=function(){
oV.webkitRequestFullScreen();
}
};
</script>
<body>
<input type="button" value="变大" />
<input type="button" value="变小" />
<input type="button" value="播放"/>
<input type="button" value="暂停"/>
<input type="button" value="暂停/播放"/>
<input type="button" value="全屏" />
</body>
```
(2)audioy:音频。使用方法大致和video很像,controls显示控件一定得添,否则不显示看不见
例如简单引入音频文件
<audio src="yhdj.mp3" controls autoplay loop></ audio>