专栏首页淡定的博客html5之自定义视频播放器

html5之自定义视频播放器

自定义样式的视频播放器

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>自定义视频播放器</title>
  <!-- 所有的库一定都在当前页面的css的前面 -->
  <link rel="stylesheet" href="./css/font-awesome.min.css">
  <!-- <link rel="stylesheet" href="./css/font-awesome.css"> -->
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <div class="player">
    <!-- 视频 -->
    <video src="./movie/movie02.mp4" width="100%" height="100%">
      <!-- <source src="./movie//movie02.mp4"> -->
    </video>
    <!-- 控制菜单 -->
    <div class="controls">
      <!-- 播放按钮 -->
      <a href="javascript:;" class="play-btn fa fa-play-circle-o"></a>
      <!-- 进度条 -->
      <div class="progress">
        <div class="progress-bar" style="width: 0%"></div>
      </div>
      <!-- 播放时间 -->
      <div class="time">
        <span class="current">00:00:00</span>/
        <span class="total">00:00:00</span>
      </div>
      <!-- 全屏按钮 -->
      <a href="javascript:;" class="fullscreen fa fa-expand"></a>
    </div>
  </div>
  <script>
    // 功能:
    // 1.视频的播放与暂停(图标变化)
    // 2.总时间的显示
    // 3.当前时间的显示(进度)
    // 4.进度条的显示
    // 5.跳跃播放
    // 6.全屏
    // 下面开始实现功能:



    // 1.视频的播放与暂停(图标变化)
    // 获取视频以及按钮
    var video=document.querySelector("video");
    var btn=document.querySelector(".play-btn");
    btn.addEventListener("click",function(){
      // 判断视频状态并改变按钮
      if(video.paused){
        video.play();
        // this.classList.toggle("fa-pause-circle-o");
        this.classList.remove("fa-play-circle-o");
        this.classList.add("fa-pause-circle-o");

      }else{
        video.pause();
        this.classList.remove("fa-pause-circle-o");
        this.classList.add("fa-play-circle-o");
      }
    });
    // 2.总时间的显示
    // 获取总时间的按钮
    var total=document.querySelector(".total");
    video.oncanplay=function(){
      var h=Math.floor(video.duration/3600);
      var m=Math.floor(video.duration/60-(h*60));
      var s=Math.floor(video.duration%60);
      h=h<10?'0'+h:h;
      m=m<10?'0'+m:m;
      s=s<10?'0'+s:s;
      total.innerHTML=h+':'+m+':'+s;
    }
    // 获取当前时间
    var current=document.querySelector(".current");
    // 获取进度条
    var progressBar = document.querySelector(".progress-bar");
    video.ontimeupdate=function(){
      var h=Math.floor(video.currentTime/3600);
      var m=Math.floor(video.currentTime/60-(h*60));
      var s=Math.floor(video.currentTime%60);
      h=h<10?'0'+h:h;
      m=m<10?'0'+m:m;
      s=s<10?'0'+s:s;
      current.innerHTML=h+':'+m+':'+s;
        // 计算公式 进度条的长度 = 当前时间 / 总时间 * 100 + '%'
        progressBar.style.width = video.currentTime / video.duration * 100 + '%';
    }
    //跳跃播放
    // 获取进度条
    var progress=document.querySelector(".progress");
    progress.addEventListener("click",function(event){
        var clickX=event.offsetX;
        var width=this.offsetWidth
       video.currentTime = clickX / width * video.duration;
    });
    // 全屏
    // 获取按钮
    var fullscreen = document.querySelector(".fullscreen");
    fullscreen.onclick = function () {
    // 请求全屏
      video.webkitRequestFullScreen();
      
    }

  </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • php之laravel学习常见错误2(连载中)

    下面是我们整理的php的laravel学习的常见的错误以及解决的办法,我还会持续更新,请关注

    一个淡定的打工菜鸟
  • markdown基础语法

    一个淡定的打工菜鸟
  • 总结一下laravel中Hash::make()遇到的坑

    ==这里遇到的坑就是laravel框架中,每次hash的值都是不一致的,跟之前写过的md5不一样,md5是唯一的,但是只要保存进去了,就算hash以后的值是不一...

    一个淡定的打工菜鸟
  • 视频播放器

    王凡汎
  • weex-14-video组件使用

    下面是一个网络视频地址 http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981...

    酷走天涯
  • 【译】Android Gradle 插件 4.0.0 中 Feature-on-Feature 的依赖关系

    随着 Android Studio 4.0 稳定版的发布,有人对于 Feature-on-Feature Dependencies 的作用提出了疑问,表示不理解...

    恋猫
  • 设计模式之工厂方法模式

    Define an interface for creating an object, but let subclasses decide which clas...

    beginor
  • Python自动化运维Django入门

    随着IT运维技术日益更新,近几年运维自动化越来越火,而且学习python的人非常的火爆,尤其是python自动化运维开发,得到了很多前辈的推崇。

    py3study
  • 经典动态规划:高楼扔鸡蛋

    今天要聊一个很经典的算法问题,若干层楼,若干个鸡蛋,让你算出最少的尝试次数,找到鸡蛋恰好摔不碎的那层楼。

    五分钟学算法
  • JavaScript基础1

    JavaScript写在<script></script>之间    <script type="text/javascript">表示在<script></s...

    用户1624346

扫码关注云+社区

领取腾讯云代金券