快捷導(dǎo)航

Vue?監(jiān)聽(tīng)視頻播放時(shí)長(zhǎng)的實(shí)例代碼

更新時(shí)間：2024年10月17日 10:56:48 作者：Monly21

本文介紹了如何通過(guò)源碼實(shí)現(xiàn)對(duì)視頻實(shí)時(shí)時(shí)長(zhǎng)、播放時(shí)長(zhǎng)和暫停時(shí)長(zhǎng)的監(jiān)聽(tīng),詳細(xì)闡述了相關(guān)技術(shù)的應(yīng)用方法,幫助開(kāi)發(fā)者更好地掌握視頻監(jiān)控技術(shù),提高用戶體驗(yàn)

1、源碼

<template>
  <el-dialog class="videoBox" :title="title" :visible.sync="visible" width="40%" :before-close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false">
    <video id="video" controls preload autoplay="autoplay" style="width: 100%" @canplay="getVideoDur">
      <source :src="videoUrl" type="video/mp4">
    </video>
  </el-dialog>
</template>
<script>
export default {
  name: 'VideoPlayBack',
  data() {
    return {
      // 標(biāo)題
      title: null,
      // 是否顯示彈框
      visible: false,
      // 視頻地址
      videoUrl: null
    }
  },
  methods: {
    /**
     * 初始化視頻
     */
    initVideo() {
      this.$nextTick(() => {
        let myVideo = document.getElementById('video')
        myVideo.pause()
        myVideo.load()
      });
    },
    /**
     * 監(jiān)聽(tīng)視頻
     */
    getVideoDur() {
      //監(jiān)聽(tīng)播放時(shí)間
      var video = document.getElementById("video");
      // //使用事件監(jiān)聽(tīng)方式捕捉事件
      // video.addEventListener("timeupdate", function () {
      //     var timeDisplay = Math.floor(video.currentTime);
      //     var duration = Math.floor(video.duration);
      //     console.log("總時(shí)長(zhǎng)", duration);
      //     console.log("當(dāng)前播放的時(shí)長(zhǎng)", timeDisplay);
      //   }, false);
      // 監(jiān)聽(tīng)視頻播放
      // video.addEventListener("play", function () {
      //   var duration = Math.floor(video.duration);
      //   console.log("總時(shí)長(zhǎng)", duration);
      //   var timeDisplay = Math.floor(video.currentTime);
      //   console.log("視頻開(kāi)始時(shí)長(zhǎng)", timeDisplay);
      // })
      // 監(jiān)聽(tīng)視頻暫停
      video.addEventListener("pause", function () {
        var duration = Math.floor(video.duration);
        console.log("總時(shí)長(zhǎng)", duration);
        var timeDisplay = Math.floor(video.currentTime);
        console.log("視頻結(jié)束時(shí)長(zhǎng)", timeDisplay);
      })
    },
    /**
     * 關(guān)閉彈框
     */
    handleClose() {
      this.videoUrl = null
      this.visible = false
    },
  }
}
</script>
<style>
.videoBox .el-dialog__header {
  background-color: #000000;
}
.videoBox .el-dialog__header .el-dialog__title {
  color: #fff;
}
.videoBox .el-dialog__body {
  padding: 0 !important;
  background-color: #000000;
}
</style>

2、監(jiān)聽(tīng)視頻實(shí)時(shí)時(shí)長(zhǎng)

video.addEventListener("timeupdate", function () {
  var timeDisplay = Math.floor(video.currentTime);
  var duration = Math.floor(video.duration);
  console.log("總時(shí)長(zhǎng)", duration);
  console.log("當(dāng)前播放的時(shí)長(zhǎng)", timeDisplay);
}, false);

3、監(jiān)聽(tīng)視頻播放時(shí)長(zhǎng)

video.addEventListener("play", function () {
  var duration = Math.floor(video.duration);
  console.log("總時(shí)長(zhǎng)", duration);
  var timeDisplay = Math.floor(video.currentTime);
  console.log("視頻開(kāi)始時(shí)長(zhǎng)", timeDisplay);
})

4、監(jiān)聽(tīng)視頻暫停時(shí)長(zhǎng)

video.addEventListener("pause", function () {
  var duration = Math.floor(video.duration);
  console.log("總時(shí)長(zhǎng)", duration);
  var timeDisplay = Math.floor(video.currentTime);
  console.log("視頻結(jié)束時(shí)長(zhǎng)", timeDisplay);
})

到此這篇關(guān)于Vue 監(jiān)聽(tīng)視頻播放時(shí)長(zhǎng)的實(shí)例代碼的文章就介紹到這了,更多相關(guān)vue播放時(shí)長(zhǎng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: