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 条评论
登录 后参与评论

相关文章

来自专栏彭湖湾的编程世界

【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: ? 也可能是多行的: ? ...

3338
来自专栏十月梦想

移动端适配之百分比适配

前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

1523
来自专栏前端杂货铺

table-cell实现宽度自适应布局

利用table-cell可以实现宽度自适应布局。 table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之...

3565
来自专栏十月梦想

jquery基础选择器

这里的基础用法和css的选取方式一致,对于css选择器熟悉的朋友这里使用简直小意思,下面几篇博文我们来详谈jq的高级选择器!

822
来自专栏前端新视界

两个 viewports 的故事-第二部分

原文:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素...

2017
来自专栏HTML5学堂

轮播图效果,不再局限于JS制作!

HTML5学堂(码匠):网页的轮播图一直都是个比较精美的制作,同时也是用户体验较佳的效果。在开发工程师进行制作的时候往往会选择使用JS来书写,由此不禁会问,难道...

6866
来自专栏前端小叙

css如何实现一个元素高度固定宽度按比例显示?

用padding-top百分比可以实现宽度固定高度按比例展示,现在的需求是对一个video视频的盒子div高度是固定的,宽度如何按比例展示?

1731
来自专栏HTML5学堂

HTML5视音频-解决全屏下出现的控制栏

HTML5学堂:HTML5视音频-解决全屏下的控制栏。HTML5可以简简单单的实现视频、音频的播放功能,功能虽好用,但是它的默认样式有点淡淡的忧伤,问题虽存在,...

3596
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(二)

还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区...

4048
来自专栏前端说吧

CSS3-实现单选框radio的小动画

3013

扫码关注云+社区

领取腾讯云代金券