H5学习练习——多媒体（音频视频）

H5学习练习——多媒体（音频视频）

常用方法:load()、play()、pause()
常用属性:currentSrc、currentTime、duration
常用事件:oncanplay， ontimeupdate，onended 等
具体地址:参考文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/player.css">
</head>
<body>
   <figure>
       <figcaption>撩课视频</figcaption>
       <section class="player">
           <video src="source/BigBuck.m4v"></video>
           <!--控制-->
           <div class="controls">
               <!--播放/暂停-->
               <a href="javascript:;" class="switch itlike-play3"></a>
               <!--进度条-->
               <div class="progress">
                   <div class="line"></div>
                   <div class="bar"></div>
               </div>
               <!--当前播放的时长/播放的总时长-->
               <div class="time">
                   <span class="current">00:00:00</span> /
                   <span class="total">00:00:00</span>
               </div>
               <!--全屏/取消全屏-->
               <a href="javascript:;" class="expand itlike-enlarge"></a>
           </div>
       </section>
   </figure>

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
   $(function () {
       // 1. 获取视频标签
       let video = $('video').get(0);
       // 2. 当浏览器可以播放音频/视频时
       video.addEventListener('canplay', ()=>{
           // 2.1 显示视频标签
           $(video).show();

           // 2.2  确定时长
           let totalTime = formatTime(video.duration);
           // console.log(totalTime);
           $('.total').html(totalTime);
       });

       // 3. 播放和暂停
       $('.switch').on('click', function (){
            // 3.1 判断
            if($(this).hasClass('itlike-play3')){ // 播放
                video.play();
                $(this).addClass('itlike-pause2').removeClass('itlike-play3'); // 切换图标
            }else { // 暂停
                video.pause();
                $(this).addClass('itlike-play3').removeClass('itlike-pause2'); // 切换图标
            }
       });

       // 4. 进度条的显示
       video.addEventListener('timeupdate', ()=>{
           // console.log(video.currentTime);
           // 4.1 求出播放进度
           // 当前的时间 / 总时间 * 100 + '%'
           let w = video.currentTime / video.duration * 100 + '%';
           // console.log(c);
           $('.line').css('width', w);
           // 4.2 修改当前播放的时间
           $('.current').html(formatTime(video.currentTime));
       });
       
       // 5. 全屏
       $('.expand').on('click', function () {
           if($(this).hasClass('itlike-enlarge')){ // 全屏
               video.webkitRequestFullScreen();
           }else { // 取消全屏
               document.webkitCancelFullScreen();
           }
       });

       // 6. 视频播放完成
       video.addEventListener('ended', ()=>{
            // 6.1 当前的视频时间清零
            video.currentTime = 0;
           // 6.2 切换图标
            $('.switch').addClass('itlike-play3').removeClass('itlike-pause2');
       });

       // 7. 点击bar跃进
       $('.bar').on('click', function (e) {
            // 当前视频播放的位置 =  点击位置 / bar的长度 * 总时长
            // 7.1 获取点击的位置
           let offset = e.offsetX;
           // console.log(offset, $(this).width());
           // 7.2 求出当前的位置
           // let current = offset / $(this).width() * video.duration;
          // console.log(current);
           // 7.3 改变当前播放的时间
           video.currentTime = offset / $(this).width() * video.duration;
       });


       let formatTime = (time)=>{
          let h = Math.floor(time / (60 * 60));
          let m = Math.floor(time % (60 * 60) / 60);
          let s = Math.floor(time % 60);
          // 00:00:00
          return (h < 10 ? '0'+ h : h) + ':' + (m < 10 ? '0'+ m : m) + ':' + (s < 10 ? '0'+ s : s);
       }
   });
</script>
</body>
</html>

哇，这个实在没啥好说的太简单了，按照参考手册弄就完了…还有一些功能现在貌似还不够完善（例如音量：volume、播放速度：defaultPlaybackRate）以后项目需要再来实战吧~

H5学习练习——多媒体（音频视频）

猜你喜欢