HTML5 - video标签和audio标签

来源：互联网发布：星海牌萨克斯淘宝网编辑：程序博客网时间：2024/05/18 13:43
video标签和audio标签

<!doctype html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <title>video标签和audio标签</title>    <head>    <body>        <h2>video标签的使用</h2>        <!-- <video src="kobe.mp4" controls="controls">            你的破浏览器可以退休了，赶紧升级吧！        </video> -->        <!-- <video controls  width="500px" autoplay loop poster="dog.jpg">            <source src="kobe.mp4" type="video/mp4" />            <source src="movie.ogg" type="video/ogg"/>            你的破浏览器可以退休了，赶紧升级吧！        </video> -->        <h2>使用video标签的API</h2>        <video src="kobe.mp4" controls="controls" id="video">            你的破浏览器可以退休了，赶紧升级吧！        </video>        <br/>        <input type="button" value="播放" onclick="playVideo()" />&nbsp;        <input type="button" value="停止" onclick="stopVideo()" />&nbsp;        <input type="button" value="快进10秒" onclick="forward()" />&nbsp;        <input type="button" value="快退10秒" onclick="back()" />&nbsp;<br/>        <input type="button" value="闭嘴" onclick="shutup(this)" />&nbsp;        <input type="button" value="加速x2" onclick="fast()" />&nbsp;        <input type="button" value="减速x2" onclick="slow()" />&nbsp;        <input type="button" value="正常倍速" onclick="normal()" />&nbsp;<br/>        <input type="button" value="大声点" onclick="up()" />&nbsp;        <input type="button" value="小声点" onclick="down()" />&nbsp;        <script>            var video=document.getElementById("video");            //播放视频            function playVideo(){                video.play();            }            //停止视频            function stopVideo(){                video.pause();            }            //快进10秒            function forward(){                video.currentTime+=10;            }            //快退10秒            function back(){                video.currentTime-=10;            }            //静音            function shutup(obj){                if(video.muted){                    video.muted=false;                    obj.value="闭嘴";                }else{                    video.muted=true;                    obj.value="说话";                }            }            //加速x2            function fast(){                video.playbackRate=2; //默认播放速度为1            }            //减速x2            function slow(){                video.playbackRate=1/2;            }            //正常倍速            function normal(){                video.playbackRate=1;            }            //大声点            function up(){                video.volume+=0.1; //声音值的范围为0-1            }            //小声点            function down(){                video.volume-=0.1; //声音值的范围为0-1            }        </script>        <h2>audio标签的使用</h2>        <audio src="wow.mp3" controls>            你的破浏览器可以退休了，赶紧升级吧！        </audio>    </body></html>
2 0