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>

 

posted @ 2016-09-08 21:29  李大白程序员  阅读(1153)  评论(0)  编辑  收藏  举报