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

最新推荐文章于 2020-02-15 15:31:02 发布

weixin_30794491

最新推荐文章于 2020-02-15 15:31:02 发布

阅读量108

点赞数

原文链接：http://www.cnblogs.com/maoking/p/7392625.html

版权

音频视频

　　标签如下

　　　　(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>