1.2.10 html5音频
1.2.10.1 HTML5音频播放
本课主要讲解HTML5播放音频
<!--<button onclick="clickA">播放/暂停</button>--> <!--系统默认控制器--> <audio controls="controls"> <source src="file://D:/webProjects/music.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio> <!--谷歌浏览器的音乐播放器不能拖进度条，很奇怪。 网上有回答是只有本地视频才会出现这种情况。。。很烦。 火狐浏览器的audio元素可以正常使用。--> <br/> <audio src="music/music.mp3" controls="controls"></audio>
参考资料：https://segmentfault.com/q/1010000011597379
自定义播放器控制器件
<body> <button onclick="clickA()">播放/暂停</button> <audio id="audio" src="music/test.mp3">您的浏览器不支持</audio> <script> var a = document.getElementById("audio"); function clickA(){ if(a.paused){ a.play(); }else{ a.pause(); } } </script>
1.2.10.2 HTML5音频视频-编解码工具
本课主要讲解编解码工具的使用
ffmpeg转码工具，命令等在此不做记录了。可以再看一遍视频或者自己搜索ffmpeg的使用教程
1.2.10.3 HTML5音频视频-视频播放
本课主要讲解HTML5的视频播放
<!--<video src="video/video.mp4" controls="controls"></video>--> <!--<video id="video" controls>--> <!--使用controls是使用浏览器默认的控制器件--> <button onclick="clickV()">播放/暂停</button><br/> <button onclick="clickBig()">放大</button><br/> <button onclick="clickSmall()">缩小</button><br/> <video id="video" height="200px" height="200px" > <source src="video/video.mp4"> <source src="video/video.ogg"> <!--准备两种类型的视频，就会播放只有一个的视频， 有一个播放就可以了--> 您的浏览器不支持！ </video> <script> var v = document.getElementById("video"); function clickV(){ if(v.paused){ v.play(); }else{ v.pause(); // paused是个状态，pause()是个函数暂停； } } function clickBig() { v.width = "400"; // v.width = 400; //在js中400和"400px"="400"是不同的，后两种才是px单位的， // 前一种我目前不知道是什么单位 v.height = "400"; } function clickSmall(){ v.width = "200"; v.height = "200"; } </script>