HTML5 Video标签 随堂笔记
Posted 李大白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 Video标签 随堂笔记相关的知识，希望对你有一定的参考价值。
代码
<audio id="sound" controls="controls">
<!--mp3格式-->
<source src="../horse.mp3"></source>
<!--ogg格式-->
<source src="../horse.ogg"></source>
您的浏览器不支持audio音频!
</audio>
<!--video-->
<video id="film" controls="controls">
<source src="../mov_cartoon.mp4" type="video/mp4"></source>
<source src="../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静音，false 35 //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标签 随堂笔记的主要内容，如果未能解决你的问题，请参考以下文章