2. 科技
  3. 我的启蒙--HTML5 第二章 音频视频

我的启蒙--HTML5 第二章 音频视频

it2025-03-13  18

音频视频

　　标签如下

　　　　(1)audio音频        

　　　　(2)video视频

　　媒体元素属型

　　　　controls : 显示或隐藏用户控制界面　　　　autoplay : 媒体是否自动播放　　　　loop : 媒体是否循环播放　　　　currentTime : 开始到播放现在所用的时间　　　　duration : 媒体总时间(只读)　　　　volume : 0.0-1.0的音量相对值　　　　muted : 是否静音

　　　　paused : 媒体是否暂停(只读)　　　　ended : 媒体是否播放完毕(只读)　　　　error : 媒体发生错误的时候，返回错误代码 (只读)　　　　currentSrc : 以字符串的形式返回媒体地址(只读)　　　　play() : 媒体播放　　　　pause() : 媒体暂停　　　　load() : 重新加载媒体

　　Media事件

　　　　onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。

　　　　ontimeupdate：当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本

　　Video额外特性

　　　　poster : 视频播放前的预览图片 eg:oV.poster = 'timg.jpg'　　　　width、height : 设置视频的尺寸　　　　videoWidth、 videoHeight : 视频的实际尺寸(只读)

　　下面是自定义音频的代码,基本把所以的功能都做上了,但是主要用的是Js,谁让他们不分家,没办法

　　

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .tu{background: url(play.gif) no-repeat right; padding-right:20px; } </style> </head> <body> <div id="box"> <h2>双击播放</h2> <a href="#">像风一样自由</a><br><br> <a href="#">北京的冬天</a><br><br> <a href="#">吻得太逼真</a><br><br> <a href="#">最浪漫的事</a><br><br> <a href="#">成都</a><br><br> <br> <audio src="" id="a1" controls></audio> <br><br> <button>播放</button> <button>暂停</button> <button>快进</button> <button>快退</button> <br><br> <button>音量+</button> <button>音量-</button> <button>静音</button> <br><br> <button>全屏</button> <button>上一曲</button> <button>下一曲</button> </div> <script> //定义数组保存歌曲 var songs=[ "像风一样自由", "北京的冬天", "吻得太逼真", "最浪漫的事", "成都" ]; //获取 var oA=document.getElementsByTagName("a"); var btn=document.getElementsByTagName("button"); var audio=document.getElementsByTagName("audio")[0]; //遍历所有a 给每一个a绑定双击事件 var a; for(var i=0;i<oA.length;i++){ oA[i].index=i;//设置下标 oA[i].ondblclick=function(){ a=this.index; play1(a) } } //定义播放函数 function play1(n){ audio.src="mp3/"+songs[n]+".mp3"; audio.play(); //先让所有a的类名清空 for(var i=0;i<oA.length;i++){ oA[i].className=""; } oA[n].className="tu"; } //为按钮绑定事件 btn[0].onclick=function(){ audio.play(); } btn[1].onclick=function(){ audio.pause(); } //快进 快退 btn[2].onclick=function(){ audio.currentTime+=5; } btn[3].onclick=function(){ audio.currentTime-=5; } //音量 + - btn[4].onclick=function(){ audio.volume+=0.1; } btn[5].onclick=function(){ audio.volume-=0.1; } //静音 btn[6].onclick=function(){ audio.muted=!audio.muted; if(audio.muted){ btn[6].innerHTML="取消静音"; }else{ btn[6].innerHTML="静音"; } } //上一曲 下一曲 btn[8].onclick=function(){ a--; if(a<0){ a=oA.length-1; } play1(a); } btn[9].onclick=function(){ a++; if(a==oA.length){ a=0; } play1(a); } </script> </body> </html>

再发一份视频的基础代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- play() : 媒体播放 pause() : 媒体暂停 load() : 重新加载媒体 --> <video src="少女时代.mkv" controls width="700px" poster="bg0.jpg"></video> <button>测试</button> <br> <button>播放</button> <button>重新加载</button> <script> // var btn=document.getElementsByTagName("button"); var video=document.getElementsByTagName("video")[0]; btn[0].onclick=function(){ console.log("是否暂停"+video.paused); console.log("是否播放完毕"+video.ended); console.log("媒体发生错误时"+video.error); console.log("返回媒体地址："+video.currentSrc); } //播放暂停 btn[1].onclick=function(){ if(video.paused){ video.play(); btn[1].innerHTML="暂停" }else{ video.pause(); btn[1].innerHTML="播放" } } btn[2].onclick=function(){ video.load();//重新加载 } //ended 事件 video.onended=function(){//当媒体播放完毕的时候 alert("我播放完了") } //ontimeupdate 事件 当播放位置发生改变的时候 var a=0; video.ontimeupdate=function(){ a++; console.log(a); } </script> </body> </html>

谨记当初奋斗的自己,是他让现在的自己,享受美好,                                           敬给还在奋斗的你们,望与君共勉.

转载于:https://www.cnblogs.com/maoking/p/7392625.html

相关资源：数据结构—成绩单生成器
最新回复(0)