代码
<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>
时间： 2025-01-02 01:12:58