简单了解video标签

1，video标签简介

video是H5的新标签，它定义视频，比如电影片段或其他视频流。 它的一些属性如下：

通过如下代码可检查你的浏览器是否支持video标签。

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

在w3c中，有其简单的介绍，可移步其中。

2，视频的播放与暂停

video标签中，想让视频播放与暂停，主要用到的是video的play()和pause()事件。在vue中，进行使用的话需要获取video标签的dom，这里我用的是ref。

2.1 控件按钮

html代码如下：

<div class="video_control_right">
    <span v-if='video_state.play' class="video_to_pause" @click="pause()">播放</span>
    <span v-else class="video_to_play" @click="play()">暂停</span>
</div>

js代码如下：

play(){
    this.video_state.play = true;//记录当前视频状态，用于暂停和播放控件的切换
    this.video_state.line_port = false;//记录视频进度条要拖动时是否点击了进度点
    this.videoDom.play()

},
pause(){
    this.videoDom.pause()
    this.video_state.play = false;
}

2.2 点击视频暂停与播放

实现该功能主要是通过给video标签添加点击的监听事件，通过判断当前视频的播放状态来进行相应的视频后续操作。

js代码如下：

// 点击视频区域可以进行播放或者暂停
this.videoDom.addEventListener("click", () => { 
    if(this.videoDom.paused || this.videoDom.ended) {
        if(this.videoDom.ended) {
            // 如果视频结束，currentTime初始化为0
            this.videoDom.currentTime = 0
        }
        this.play() //调用下面play的方法
    } else {
        this.pause() //调用下面pause的方法
    }
})

3，视频进度条

要实现进度条的一些功能，首先要获取视频的整体时间长度，对于点击跳转和拖拽则需要考虑目标点与起始点的位移偏量。

html代码如下：

<div class="video_control_center" ref="video_control_center" 
@mousemove="video_control_move()" @mouseleave="video_control_leave()" 
@mouseup="video_control_leave()">
  <div class="video_line" ref="video_line">
      <div class="video_line_mid" ref="video_line_mid"></div>
      <div class="video_line_top" 
          @mousedown="handle_line_down()" 
          @mouseup="handle_up()"

      ></div>
      <!-- <div class="video_line_bot"></div> -->
      <div class="video_line_spot" 
          ref="video_line_spot"
          @mousedown="handle_spot_down()"
          @mouseup="handle_up()"
      ></div>
  </div>
  <div class="video_time">
      <span>{{currentTime ? currentTime : "00:00"}}/{{duration ? duration : "00:00"}}</span>

  </div>
</div>

js代码如下：

// 获取视频总时长
this.videoDom.addEventListener('loadedmetadata', () => { 
    this.duration = this.timeTranslate(this.videoDom.duration)
})
// 监听视频播放过程中的时间
this.videoDom.addEventListener("timeupdate", () => { 
    //是否播放完毕
    if(this.videoDom.ended) this.pause()
    this.currentTime = this.timeTranslate(this.videoDom.currentTime)
    this.line_percentage = 100 * this.videoDom.currentTime / this.videoDom.duration
    // 页面渲染进度
    this.video_line_mid.style.width = this.line_percentage + '%';
    this.video_line_spot.style.marginLeft = this.line_percentage / 100 * this.video_line_width - 6 + 'px';
})
timeTranslate(t) { // 时间转化
    let m = Math.floor(t / 60)
    m < 10 && (m = '0' + m)
    return m + ":" + (t % 60 / 100 ).toFixed(2).slice(-2)
}

3.1 进度条点击实现视频跳转

js代码如下：

//进度条点击
handle_line_down(event){
    let e = event || window.event;
    // console.log(e)
    this.pause();
    this.line_percentage = 100 * e.offsetX / this.video_line_width;       
    // 页面渲染进度
    this.video_line_mid.style.width = this.line_percentage + '%';
    this.video_line_spot.style.marginLeft = this.line_percentage / 100 * this.video_line_width - 6 + 'px';
    this.videoDom.currentTime = this.line_percentage / 100 * this.videoDom.duration;
},
handle_up(){
    this.play();
},

3.2 进度条拖拽

js代码如下：

//进度条上的进度点被鼠标按下
handle_spot_down(){
    this.video_state.line_spot = true;
},
//进度条鼠标滑动
video_control_move(event){
    if(!this.video_state.line_spot) return;
    let e = event || window.event;
    // console.log(e)
    this.pause();
    this.line_percentage = 100 * ( e.layerX - this.$refs.video_control_center.offsetLeft ) / this.video_line_width;
    // console.log(this.line_percentage)
    // 页面渲染进度
    this.video_line_mid.style.width = this.line_percentage + '%';
    this.video_line_spot.style.marginLeft = this.line_percentage / 100 * this.video_line_width - 6 + 'px';
},
video_control_leave(){
    if(this.video_state.line_spot){
        this.videoDom.currentTime = this.line_percentage / 100 * this.videoDom.duration;
        this.video_state.line_spot = false;
        this.play()
    }
},

4，音频设置

音频的大小通过volume属性来设置，其取值为[0-1]。

html代码如下：

<div class="video_voice_box">
    <div class="video_voice" @click="negation_voice()">声音</div>
    <div v-show="video_voice" class="video_voice_control">
        <div class="video_voice_line">
            <div class="video_voice_line_mid"
                ref="video_voice_line_mid"
            ></div>
            <div class="video_voice_line_top"
                ref="video_voice_line_top"
                @mousedown="handle_voice_down()"
                @mousemove="handle_vioce_move()"
            ></div>
            <div class="video_voice_line_spot"
                ref="video_voice_line_spot"
                @mousedown="handle_voice_spot_down()"
            ></div>
        </div>

    </div>
</div>

js代码如下：

// 监听声音的方法，通过此方法进行进度条渲染
this.videoDom.addEventListener("volumechange", () => {
    this.voice_percentage =  this.videoDom.volume * 100
})
//视频声音显示隐藏
negation_voice(){
    this.video_voice = !this.video_voice;
    if(this.video_voice) this.voice_count++;
    if(this.voice_count % 2 == 0){
        this.video_voice = false;
        this.voice_count = 0;
    }
},
handle_voice_down(event){
    let e = event || window.event;
    console.log(e)
    this.video_voice_line_top.style.marginTop = -2 - e.offsetY + 'px';
    this.video_voice_line_mid.style.height = e.offsetY + 'px';
    this.video_voice_line_spot.style.marginTop = -68 + e.offsetY + 'px';
    this.videoDom.volume = 1 - (e.offsetY / this.video_voice_height);
},

5，全屏设置

html代码如下：

<div class="video_full">
    <span v-if="video_state.full" @click="full()">全屏</span>
    <span v-else @click="out_full()">恢复</span>
</div>

js代码如下：

//全屏
full(){
    this.video_state.full = !this.video_state.full;
    this.video_place.style.width = 100 + "%";
    this.video_place.style.height = 100 + "%";
    this.video_line_width = this.$refs['video_line'].offsetWidth;
    this.video_line_spot.style.marginLeft = this.line_percentage / 100 * this.video_line_width - 6 + 'px';
},
out_full(){
    this.video_state.full = !this.video_state.full;
    this.video_place.style.width = 500 + "px";
    this.video_place.style.height = 650 + "px";
    this.video_line_width = this.$refs['video_line'].offsetWidth;
    this.video_line_spot.style.marginLeft = this.line_percentage / 100 * this.video_line_width - 6 + 'px';
},