按照w3school的顺序学习
https://www.w3school.com.cn/
1.插入视频
<video src="shiyan.ogg" width="320" height="240" controls="controls"> </video>
src设置路径 width和height设置视频的大小 controls 属性供添加播放、暂停和音量控件。 在w3school上有具体的视频格式 为了方便以后查找 把网址贴出来https://www.w3school.com.cn/html5/html_5_video.asp
为了使不同的浏览器兼容 可以使用source 元素 浏览器将使用第一个可识别的格式
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag.
</video> <!doctype html> <html> <head> <meta charset="utf-8"> <title>video1</title> </head> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="shiyan.mp4" type="video/mp4"> <source src="shiyan.ogg" type="video/ogg"> </video> </div> <script type="text/javascript"> //这里的作用是插入js代码 var myVideo=document.getElemenById("video1"); function playPause() { if(myVideo.pause) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=320; } function makeNormal() { myVdio.width=420; } </script> </body> </html>
其他的操作参考https://www.w3school.com.cn/tags/tag_video.asp
2.音频插入
和视频插入很类似
<audio src="/i/song.ogg" controls="controls"> </audio>
controls="controls"提供控件 同样的 为了适配不同的浏览器 提供source元素
<audio controls="controls"> <source src="/i/song.ogg" type="audio/ogg"> <source src="/i/song.mp3" type="audio/mpeg">
加一两行 后来才发现的 关于视频音频的自动播放autoplay标签现在除了ie浏览器以外几乎都不支持 刚刚试了一下很难受 相对而言这个举措也优劣参半吧
还有其他操作参照https://www.w3school.com.cn/html5/html_5_audio.asp