H5实现一个简易本地视频播放器

最新推荐文章于 2024-09-16 21:54:47 发布

西有长庚

最新推荐文章于 2024-09-16 21:54:47 发布

阅读量6k

点赞数 2

分类专栏：一些小demo 文章标签： html5 video 本地视频播放器

本文链接：https://blog.csdn.net/sinat_41660714/article/details/103318837

版权

一些小demo 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

注：本例子没有涉及到数据库，是纯前端实现的

要点介绍

video标签是html5新增的一个标签，用于视频播放，在W3C官方文档可以查到它的相关方法，属性和时间，此处我大致介绍一下我用到的一些：

1，方法：

play()，视频播放
pause()，视频暂停
load(), 视频加载

2，属性

currentTime,视频的播放进度
duration，视频的总长度
volume，视频的音量

3，事件

play，视频播放时触发
pause，视频暂停时触发
timeupdate，视频进度发生改变时触发

效果预览

先来看一下实现的效果图：
在这里插入图片描述

大致功能介绍

点击播放按钮，播放视频
点击暂停按钮，暂停视频
视频进度条时刻跟踪视频播放进度，当进度条漫时，视频自动停播
拖动进度条，控制视频的播放进度
点击全屏按钮，视频全屏播放
点击声音控件，控制声音变小或变大
点击播放列表中的某一项，视频切换播放

实现思路

还是惯例来捋一下思路，因为这个布局也不复杂，我就只写一下js部分的思路：

效果	思路
点击播放/暂停	利用类切换，点击事件中，首先判断当前是哪一个类名，是播放类就暂停，移出播放类，添加暂停类
全屏功能	利用API element.requestFullScreen()实现，在点击事件里设置即可
进度条绑定视频播放进度	获取视频已经播放的事件以及总时间，将计算结果赋值给进度条的value
进度条控制视频播放进度	原理和上面类似，只是要反过来，是要把进度条的value值和总时间的计算结果赋值给当前播放时间属性
视频切换功能	利用自定义属性，将视频地址绑定到每个li标签上，例如点击第一个视频，在点击事件中就是将自定义属性中存储的地址赋给video标签的src属性
声音控制	和视频进度实现原理一样，将计算结果赋值给volume属性即可

代码实现

贴一下代码

<!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>Document</title>
  <link rel="stylesheet" href="../fonts/font_x1hton6tlu9/iconfont.css">
  <style>
    html,body {
      background-color: #ccc;
    }
    *{
      margin: 0;
      padding: 0;
    }
   
  .container {
    position: relative;
    width: 700px;
    height: 500px;
    background-color: #ccc;
    margin: 0 auto;
    margin-top: 100px;
    display: flex;
  }
  .left {
    flex: 3;
    background-color: rgb(80, 71, 71 );
  }
  .left_top{
    font-size: 25px;
    height: 100px;
    text-align: center;
    line-height:100px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.096) ;

  }
  .left_list{
    height: 80%;
    /* padding-top: 30px; */
    background-color:  hsla(0, 5%, 41%, 0.959);
  
  }
  .left_list ul{
    list-style: none;

  }
  .left_list ul li{
    height: 30px;
    border-bottom: 1px solid rgba(219, 202, 202, 0.63);
    text-align: center;
    line-height: 30px;
  }
  .left_list ul li:nth-child(1){
    border-top:1px solid  rgba(219, 202, 202, 0.63);
  }
  .right {
    flex:7;
    background-color:rgba(82, 83, 83, 0.952);
  }
  .right_top{
    height: 400px;
    background-color: rgba(19, 20, 20, 0.89);
  }
  .right_bottom {
    height: 100px;
   

  }
 .iconfont{
   font-size: 40px;
   
 }
 /* 开关按钮 */
 .iconfont.open_down {
 }
 /* 全屏按钮 */
 .iconfont.fullscreen {
  
 }
 /* 进度条 */
 .iconfont.progress_bar {

 }
 video{
   width: 100%;
   height: 100%;
 }
 /* 浮动，让控制元素排成一排 */
 .right_controls {
   width: 100%;
   position: relative;
   
   
   height: 100%;
   line-height: 100px;
   margin-right: 20px;
 }
 .controls {
   margin-right: 10px;
 }
 /* 进度条 */
 [type="range"]{
  /* vertical-align: middle; */
  width: 280px;
 }
 .voice_controls {
   position: absolute;
  width: 100px;
   transform-origin: left bottom;
   transform:rotateZ(-90deg);
   left: 430px; 
   top: 10px;
   display: none;
 }
 /* 控制声音控件地显示与隐藏 */
 .show {
   display: inline;
 }

 /* 头部的标题 */
 .top_name {
   position:absolute;
   font-size: 30px;
   color: rgba(255, 248, 220, 0.452);
   top: 0;
   left: 50%;
 }
 
  
  </style>
</head>
<body>
  <div class="container">
    <!-- 左边播放列表部分 -->
    <div class="left">
      <!-- 标题 -->
      <div class="left_top">播放列表</div>
      <!-- 列表 -->
      <div class="left_list">
        <ul>
          <li url="../video/movie01.mp4">01集</li>
          <li url="../video/movie02.mp4">02集</li>
          <li url="../video/movie03.mp4">03集</li>
          <li url="../video/movie04.mp4">04集</li>
        </ul>
      </div>
    </div>
    <!-- 右边部分 -->
    <div class="right">
      <!-- 视频播放部分 -->
      <div class="right_top">
      <video src="../video/movie01.mp4" ></video>
      </div>
      <!-- 视频控制部分 -->
      <div class="right_controls">
        <!-- 开关按钮 -->
      <i class="controls open_down iconfont icon-bofang 
       "></i> 
       <!-- 全屏控制按钮 -->
      <i class="controls fullscreen iconfont icon-quanping 
        "></i>
        <!-- 视频进度条 -->
        <input class="controls bar" type="range" value="0">
        <i class="controls voice iconfont icon-shengyin 
          "></i>
          <input type="range" class="voice_controls">
      </div>

    </div>

    <div class="top_name">正在播放</div>
  </div>

  <script>
    // 获取元素
  var open_down=document.querySelector(".open_down");
  var video=document.querySelector("video");
  var bar=document.querySelector(".bar");
  var fullscreen=document.querySelector(".fullscreen");
  var lis=document.querySelectorAll("li");
  var voice_controls=document.querySelector(".voice_controls");
  var voice=document.querySelector(".icon-shengyin");


// 播放暂停
   open_down.addEventListener("click",function(){
    //  判断是否是开启按钮，是就播放
     if(open_down.classList.contains("icon-bofang")){
      //  播放
      video.play();
      open_down.classList.remove("icon-bofang");
      open_down.classList.add("icon-iconfront-")
     }else{
      //  暂停
       video.pause();
       open_down.classList.remove("icon-iconfront-");
      open_down.classList.add("icon-bofang")
     }
   })
  //  以上，播放及暂停功能完成

  // 视频进度改变，进度条记录变化
video.addEventListener("timeupdate",function(){
   // 已播放
   var current=video.currentTime;
    // 视频全程时间
    var all=video.duration;
    // 设置给进度条
    bar.value=(current/all)*100;
    // 视频播放完毕，自动
    if(bar.value==100){
      open_down.classList.remove("icon-iconfront-");
      open_down.classList.add("icon-bofang")

    }

})
// 以上，记录进度功能完成


// 拉进度，改变视频进度
bar.addEventListener("change",function(){
  video.currentTime=bar.value/100*video.duration;
  if(bar.value==100){
      open_down.classList.remove("icon-iconfront-");
      open_down.classList.add("icon-bofang")

    }
})
// 以上，拉进度功能完成


// 全屏功能
fullscreen.addEventListener('click',function(){
  video.requestFullscreen();
})
// 以上，全屏功能完成


// 切换视频

for(var i=0;i<lis.length;i++){
  lis[i].addEventListener("click",fn)
}
// 因为是纯前端实现视频切换，我把视频地址通过自定义属性存在li标签上
function fn(){
  video.src=this.getAttribute("url");

}

// 控制声音，和上面视频进度条的实现原理类似
voice.addEventListener("click",function(){
 if(!voice_controls.classList.contains("show")){
  //  判断是声音控件是显示地状态还是隐藏地状态，显示的时候就隐藏
   voice_controls.classList.add("show");
  voice_controls.addEventListener("change",function(){
    video.volume=voice_controls.value/100;
  })}else{
    voice_controls.classList.remove("show");
  }
})
  </script>
</body>
</html>