Video标签的基本使用

最新推荐文章于 2024-12-31 17:56:05 发布

夏风0511

最新推荐文章于 2024-12-31 17:56:05 发布

阅读量2.7k

点赞数 3

分类专栏： html5 文章标签：前端

本文链接：https://blog.youkuaiyun.com/zeng_zhao0511/article/details/96490805

版权

html5 专栏收录该内容

1 篇文章

订阅专栏

关于video 的常见用法

video 是HTML5新增的方法，关于其他的相信大家也很清楚了！好了废话不多说

以下是我遇到的一些的方法

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

以下是一些属性

.currentTime 获取视频当前的播放时间，以秒为单位
.duration 获取视频的总时长
.volume 音量的大小
……

接下来来实现自定义的简单视频功能，上code

html

<div class="box">
  <div class="video-left">
    <video src="./movies/movie01.mp4"></video>
    <!-- 下面的控制器 -->
    <div class="controls">
      <i class="play fa fa-play"></i>
      <i class="full fa fa-arrows-alt"></i>
      <!-- 滑块的值 0-100 -->
      <input class="range-play" type="range" value="0">
      <i class="volume fa fa-volume-up">
        <input class="range-volume" type="range" value="100">
      </i>
    </div>
  </div>
  <div class="video-right">
    <ul>
      <li>灰姑娘</li>
      <li>兔子哥</li>
      <li>报告老板</li>
      <li>轻松时刻</li>
    </ul>
  </div>
</div>

css

 .box {
      width: 800px;
      height: 500px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.4);
      border-radius: 10px;
      display: flex;
    }
    /*-----------  左侧布局 ---------------*/
    .video-left {
      flex: 4;
    }
    .video-left video {
      height: 85%;
      width: 100%;
      display: block;
      background-color: #000;
    }
    .video-left .controls {
      height: 15%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .video-left .play,
    .video-left .full,
    .video-left .volume {
      flex: 1;
    }
    .video-left .range-play {
      flex: 7;
    }
    .video-left i {
      text-align: center;
      font-size: 25px;
      color: orange;
      cursor: pointer;
    }
    .video-left .volume {
      position: relative;
    }
    .video-left .volume:hover .range-volume {
      display: block;
    }
    .video-left .range-volume {
      width: 80px;
      position: absolute;
      left: -7px;
      top: -47px;
      transform: rotate(-90deg);
      display: none;
    }


    /*-----------  右侧布局 ---------------*/
    .video-right {
      flex: 1;
    }
    .video-right ul {
      width: 100%;
      height: 100%;
      background-color: #666;
    }
    .video-right li {
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      cursor: pointer;
    }

js

控制播放暂停

play.addEventListener("click", function() {
    if ( play.classList.contains("fa-play") ) {
      // 点击播放视频
      video.play();
      // 点击完成后, 切换成暂停按钮
      play.classList.remove("fa-play");
      play.classList.add("fa-pause");
    }
    else {
      // 说明要暂停
      video.pause();
      // 切换类
      play.classList.remove("fa-pause");
      play.classList.add("fa-play");
    }
  });

控制是否全屏，需要兼容处理

full.addEventListener("click", function() {
    if ( video.requestFullScreen ) {
      video.requestFullScreen();
    }
    // 兼容谷歌
    else if ( video.webkitRequestFullScreen ) {
      video.webkitRequestFullScreen();
    }
    // 兼容火狐
    else if ( video.mozRequestFullScreen ) {
      video.mozRequestFullScreen();
    }
  })

控制进度条

 video.addEventListener("timeupdate", function() {
    var percent = (video.currentTime / video.duration) * 100;
    rangePlay.value = percent;
  });

  // 当用户选择了进度时, 更新播放进度
  rangePlay.addEventListener("change", function() {
    var currentTime = (rangePlay.value / 100) * video.duration;
    // currentTime可以进行获取或者赋值
    video.currentTime = currentTime;
  });

控制音量

rangeVolume.addEventListener("change", function() {
    // 根据滑块的值, 设置 video 的音量
    video.volume = rangeVolume.value / 100;

    // 如果音量 == 0, 就切换类
    if ( video.volume == 0 ) {
      // 没有声音了
      volume.classList.remove("fa-volume-up");
      volume.classList.add("fa-volume-off");
    }
    else {
      // 有声音
      volume.classList.add("fa-volume-up");
      volume.classList.remove("fa-volume-off");
    }
  })