• h5视频播放


              h5视频播放

    一直在写js原生的东西,感觉总是停滞不前,现在我们应该学一些h5新的特性,因为我们毕竟是从事前端的,下面我们一起来写一个视频播放吧

    1,html

     1 <div class="video">
     2     <video src="video/oceans.ogv" controls></video><br>
     3     <div class="box">
     4         <div class="bar"></div>
     5     </div>
     6     <span id="te"></span>
     7     <ul id="list"></ul>
     8     <button>播放</button>
     9     <button>快进</button>
    10     <button>快退</button>
    11     <button>播放速度+</button>
    12     <button>播放速度-</button>
    13     <button>全屏</button>
    14     <button>重新加载</button>
    15     <button>关闭声音</button>
    16     <button>上一个</button>
    17     <button>下一个</button>
    18     <input type="range" max="100" min="0" value="30" id="ipt" onchange="control(8,this)">
    19     <span>X</span><span id="zero">0</span>
    20     </div>

    2,css

    1     .box{width:624px;height:10px;border:1px solid #fafafa;background:#fafafa;}
    2     .bar{width:0;height:10px;background:green;}
    3     li{list-style: none;display: inline-block;border:1px solid red;margin-right: 10px;}
    4     .video{width:800px;height:600px;}
    5      video{width:800px;height:400px;}

    3,css

      1 //获取节点
      2     var V=document.querySelector("video");
      3     var btn=document.querySelectorAll("button");
      4     var ipt=document.querySelector("#ipt");
      5     var oSpan=document.querySelector("#zero");
      6     var bar=document.querySelector(".bar");
      7     var box=document.querySelector(".box");
      8     var time=document.querySelector("#te");
      9     var list=document.querySelector("#list");
     10     var a=0;
     11     var data=[{"url":"video/1.mp4","name":"低版本武侠剧"},
     12     {"url":"video/2.mp4","name":"中武侠成本剧"},
     13     {"url":"video/3.mp4","name":"万万木有想到"},
     14     {"url":"video/4.mp4","name":"大王叫我来巡山"}];
     15         //1 点击事件
     16     for(var i=0;i<btn.length;i++){
     17         btn[i].index=i;
     18         btn[i].onclick=function(){
     19             control(this.index);
     20         }
     21     }
     22     function control(state,node){
     23         var init=state;
     24         state=state==2?1:state;
     25         state=state==4?3:state;
     26         switch(state){
     27             case 0:
     28             if(btn[state].innerText=="播放"){
     29                 btn[state].innerText="暂停";
     30                 V.play();
     31             }else{
     32                 btn[state].innerText="播放";
     33                 V.pause();
     34             }
     35             break;
     36             case 1:
     37             if(init==1){
     38                 V.currentTime+=5;
     39             }else{
     40                 V.currentTime+=-5;
     41             }
     42             break;
     43             case 3:
     44             if(init==3){
     45                 V.playbackRate+=0.2;
     46                 V.playbackRate=V.playbackRate>1.9?1:V.playbackRate;
     47                 oSpan.innerText=(oSpan.innerText++)==4?1:oSpan.innerText;
     48             }else{
     49                 V.playbackRate+=-0.2;
     50                 V.playbackRate=V.playbackRate<0.2?1:V.playbackRate;
     51                 oSpan.innerText=(oSpan.innerText--)==-4?1:oSpan.innerText;
     52             }
     53             break;
     54             case 5:
     55             V.webkitRequestFullScreen();
     56             break;
     57             case 6:
     58             V.load();
     59             V.play();
     60             // console.log(V.load());
     61             break;
     62             case 7:
     63             if(V.muted){
     64                 V.muted=false;
     65                 btn[state].innerText="关闭声音";
     66             }else{
     67                 V.muted=true;
     68                 btn[state].innerText="打开声音";
     69             }
     70             break;
     71             case 8:
     72             V.volume=node.value/100;
     73             break;
     74         }
     75     }
     76     //视频切换
     77     for(var i=0;i<data.length;i++){
     78         list.innerHTML+="<li>"+data[i].name+"</li>";
     79     }
     80     var alist=document.querySelectorAll("li");
     81     for(var i=0;i<alist.length;i++){
     82         alist[i].index=i;
     83         alist[i].onclick=function(){
     84         a=this.index;
     85         V.src=data[a].url;
     86         V.play();
     87     }
     88     
     89 }
     90            btn[8].onclick=function(){
     91             V.src="";
     92          a--;
     93             if(a<0){
     94                 a=3;
     95             }
     96              V.src=data[a].url;
     97               V.play();
     98         }
     99         btn[9].onclick=function(){
    100             V.src="";
    101             a++;
    102             if(a>3){
    103                 a=0;
    104             }
    105             V.src=data[a].url;
    106              V.play();
    107         }
    108     //3 进度条
    109     setInterval(function(){
    110         var m=parseInt(V.duration/60);
    111         var s=parseInt(V.duration%60);
    112         var vm=parseInt(V.currentTime/60);
    113         var vs=parseInt(V.currentTime%60);
    114         time.innerHTML=vm+":"+vs+"/"+m+":"+s;
    115         bar.style.width=V.currentTime/V.duration*100+"%";
    116     },1000/24);
    117     box.onclick=function(e){
    118         var e=e||window.event;
    119         var vtime=e.offsetX/this.offsetWidth*V.duration;
    120         V.currentTime=vtime;
    121     }

     

  • 相关阅读:
    selenium 安装
    创建项目/执行
    mysql远程访问
    如何通过批处理文件直接运行python代码
    python中通过字典实现函数指针
    装饰器
    正则表达式学习笔记
    Jupyter使用
    【数学】一张通往数学世界的地图-阅读笔记
    【算法导论】二叉搜索树的删除除操作
  • 原文地址:https://www.cnblogs.com/caixiufang/p/6765098.html
Copyright © 2020-2023  润新知