首页 > 代码库 > HTML5 Video标签 随堂笔记
HTML5 Video标签 随堂笔记
代码
<audio id="sound" controls="controls">
<!--mp3格式-->
<source src="http://www.mamicode.com/horse.mp3"></source>
<!--ogg格式-->
<source src="http://www.mamicode.com/horse.ogg"></source>
您的浏览器不支持audio音频!
</audio>
<!--video-->
<video id="film" controls="controls">
<source src="http://www.mamicode.com/mov_cartoon.mp4" type="video/mp4"></source>
<source src="http://www.mamicode.com/mov_cartoon.ogg" type="video/ogg"></source>
您的浏览器不支持video音频!
</video>
1 <body> 2 <audio id="sound" controls="controls"> 3 <!--mp3格式--> 4 <source src="../horse.mp3"></source> 5 <!--ogg格式--> 6 <source src="../horse.ogg"></source> 7 您的浏览器不支持audio音频! 8 </audio> 9 <!--video-->10 <video id="film" controls="controls">11 <source src="../mov_cartoon.mp4" type="video/mp4"></source>12 <source src="../mov_cartoon.ogg" type="video/ogg"></source>13 您的浏览器不支持video音频!14 </video>15 16 <!--视频显示播放控件-->17 <!--controls="controls"-->18 19 <!--自动播放-->20 <!--autoplay="autoplay"-->21 22 <!--poster 视频首图-->23 <!--loop="loop" 循环播放-->24 <!--视频宽度width高度heiht-->25 <div>26 <input type="button" name="" id="btn" value="播放" />27 <input type="button" name="" id="" value="sound" />28 </div>29 <script type="text/javascript">30 var oFilm = document.getElementById(‘film‘);31 var oSound = document.getElementById(‘sound‘);32 var oBtn = document.getElementById(‘btn‘);33 oBtn.onclick = function() {34 //静音，true静音，false35 //oFilm.muted = true;36 //事件属性方法一起用，点击让他暂停播放37 var flag = oFilm.paused;38 if(flag) {39 oFilm.play(); //播放40 } else {41 oFilm.pause(); //暂停42 }43 }44 //事件监听 addEventListener() 方法用于向指定元素添加事件;45 oFilm.addEventListener("timeupdate", function() {46 // console.log(this.currentTime);47 });48 oFilm.addEventListener("volumechange", function() {49 // console.log(this.currentTime);50 console.log(this.volume);51 52 });53 </script>54 </body>
自定义
1 <script type="text/javascript"> 2 var oVideo = document.getElementById("video"); 3 var oVi = document.getElementById(‘vi‘); 4 var oIm = document.getElementById(‘im‘); 5 oVideo.controls=false; 6 //按钮显示隐藏 7 oVi.onmouseenter = function () { 8 oIm.style.display = "block" 9 }10 oVi.onmouseleave= function () {11 oIm.style.display = "none"12 }13 //按钮实现播放功能14 oIm.onclick=function () {15 var flag = oVideo.paused;16 if (flag) {17 oVideo.play();18 } else{19 oVideo.pause();20 }21 }22 //音量控制23 var oInp = document.getElementById(‘inp‘);//拖动条24 var t = oInp.value;//拖动条的值25 var m = oVideo.volume;//视频音量26 console.log(m);27 function setvalue() {28 oVideo.volume = oInp.value/100;29 }30 31 </script>
HTML5 Video标签 随堂笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。