vue视频

方法一：原生video标签播放文件

<template>
  <div class="player-container">
    <!-- 这个可 -->
    <!-- src="@/assets/video/test.mp4" -->
    <video
      :src="videoOptions.src"
      :controls="videoOptions.controls"
      class="video-js vjs-big-play-centered vjs-fluid"
      webkit-playsinline="true"
      playsinline="true"
      x-webkit-airplay="allow"
      x5-playsinline
      style="width: 100%;height:100%"
      @play="onPlayerPlay"
      @pause="onPlayerPause"
      @seeking="seeking"
      autoplay="autoplay"
      ref="video"
    ></video>
  </div>
</template>
<script>
export default {
  data() {
    return {
      videoOptions: {
        controls: true,
        src: require('@/assets/video/test.mp4'), // url地址
      },
    }
  },
  methods: {
    initVideo() {
      //原生初始化视频方法
      let myVideo = this.$refs.video
      //ontimeupdate
      myVideo.ontimeupdate = function () {
        myFunction()
      }
      let _this = this

      function myFunction() {
        let playTime = myVideo.currentTime
        setTimeout(function () {
          localStorage.setItem('cacheTime', playTime)
        }, 500)
        let time = localStorage.getItem('cacheTime')
        // 当前播放位置发生变化时触发。
        if (playTime - Number(time) > 2) {
          myVideo.currentTime = Number(time)
        } else {
        }
      }
    },

    // 播放回调
    onPlayerPlay(player) {
      // this.globalSetting = true
      console.log('player play!', player)
      // document.getElementsByClassName("vjs-control-bar").style.display = "block";
      // document.getElementsByClassName("vjs-control-bar").style.display = "block";
    },

    // 暂停回调
    onPlayerPause(player) {
      // this.globalSetting.controls = false;
      // console.log("player pause!", player);
      // var video = document.getElementById("video");
      // video.controls=false;
      // document.getElementsByClassName("vjs-control-bar").style.display = "none";
    },
  },
}
</script>

主要是注意，直接写在标签上的src本地文件可以正常引入：

<video
      src="@/assets/video/test.mp4"
      :controls="videoOptions.controls"
      class="video-js vjs-big-play-centered vjs-fluid"
      webkit-playsinline="true"
      playsinline="true"
      x-webkit-airplay="allow"
      x5-playsinline
      style="width: 100%;height:100%"
      @play="onPlayerPlay"
      @pause="onPlayerPause"
      @seeking="seeking"
      autoplay="autoplay"
      ref="video"
    ></video>

如果使用data通过绑定引入本地文件需要前面加上require()

videoOptions: {
	controls: true,
	src: require('@/assets/video/test.mp4'), // url地址
},

原生JS实现一个简易H5播放器

方法二：vue-video-player

在

D:\软件实验室\软件服务外包大赛\a10\web\a10\src\views\video\videodemo.vue

<template>
  <div class="player-container">
    <video-player
      class="vjs-custom-skin"
      :options="playerOptions"
      ref="videoPlayer"
    ></video-player>
  </div>
</template>
<script>
//引入video样式
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
//引入hls.js
//import 'videojs-contrib-hls.js/src/videojs.hlsjs'

export default {
  data() {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        controls: true, //控制条
        preload: 'auto', //视频预加载
        muted: false, //默认情况下将会消除任何音频。
        loop: false, //导致视频一结束就重新开始。
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4',
            // 本地的要用require修饰
            src:
                'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
            //   require("@/assets/video/test.mp4"), //你所放置的视频的地址，最好是放在服务器上
          },
        ],
        poster: 'http://39.106.117.192:8080/static/indexImg.png', //你的封面地址（覆盖在视频上面的图片）
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
    }
  },
  // 这是为了自定义按钮使用而写
  computed:{
    player() {
        return this.$refs.videoPlayer.player
    }
  }
}
</script>

vue-video-player的使用，实现自定义播放起点(位置)

问题

如何获取别人的点击事件，别人的点击事件是干了什么？

通过自定义currentTime调转到相应时间点

computed: {
	player() {
		return this.$refs.videoPlayer.player
	},
},

监听 currentTime，只要改变就调用playerReadied，跳到指定视频点

watch: {
  playtimes(val, oldVal) {
    //普通的watch监听
    console.log('playtimes: ' + val)
    this.playerReadied(this.$refs.videoPlayer.player, val)
  },
},

//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
playerReadied(player, playtimes) {
  player.currentTime(playtimes)
  // console.log('example player 1 readied', player);
},

实现跟随视频播放而滚动时间轴

Vue2-自定义指令-元素滚动到指定位置
vue自定义指令实现滚动div中的元素滚动到指定位置
vue实现点击某个v-for遍历的数据，改变其样式。

看这个：（上面的有bug）
vue 列表自动滚动到制定位置
Vue系列：滚动页面到指定位置实现
scrollIntoView 与平滑滚动

具体实现：
1、实现滚动到具体位置
2、监听当前播放点和时间轴的列表进行对比，若匹配，则滑动

监听：

// 当前播放位置发生变化时触发。
// 将时间与现在的对比，一旦有变化，就调用滑动轴
onPlayerTimeupdate(player) {
  this.currentTime = player.cache_.currentTime
  console.log(' onPlayerTimeupdate!', this.currentTime)
  var len = this.timelist.length
  for (var i = 0; i < len; i++) {
    var listtime = this.formatToSecond(this.timelist[i].start)
    var curtime = Math.floor(this.currentTime)
    if (listtime == curtime) {
      this.scrollTimeline(i)
      break
    }
  }
},

滑动时间线：

// 滑动时间线
scrollTimeline(index) {
  console.log('hhh')
  this.$nextTick(() => {
    console.log('this.$refs.timeline[index]:', this.$refs.timeline[index])
    let offset = this.$refs.timeline[index].$el.offsetTop
    console.log(offset)
    this.scrollTop = {
      allowScroll: true,
      offset: offset,
      complete: () => {
        this.scrollTop = false
      },
    }
  })
},

//用这个
scrollTimeline(index) {
  document.getElementById('here').scrollIntoView({
    behavior: 'smooth', // 默认 auto
    block: 'center', // 默认 center
    inline: 'nearest', // 默认 nearest
  })
},

要滑动部位：

v-scroll-top=“scrollTop”
这个是哪个在滚动就放在哪个组件上

:class=“key == scrollTargetIndex ? ‘color’ : ‘’”
这个是用来改变样式的

<el-col :span="12" class="rightbox" v-scroll-top="scrollTop">
  <el-button
    type="primary"
    icon="el-icon-s-tools"
    @click="handlevideo"
    v-if="!extractAudioFlag"
    >处理视频</el-button
  >
  <div class="rightline" v-if="extractAudioFlag">
    <el-timeline>
      <el-timeline-item
        :timestamp="item.start + '-' + item.end"
        placement="top"
        v-for="(item, key) in timelist"
        ref="timeline"
      >
        <el-card :class="key == scrollTargetIndex ? 'color' : ''">
          <el-row type="flex">
            <el-col :span="18">
              <el-input
                v-model="item.text"
                readonly
                @focus="edit(key)"
              ></el-input>
            </el-col>
            <el-col :span="6" class="editbutton">
              <el-tooltip
                effect="dark"
                content="编辑"
                placement="bottom"
              >
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="editAudio(key)"
                ></el-button>
              </el-tooltip>

              <el-button
                type="success"
                icon="el-icon-check"
                circle
                @click="scrollTimeline(1)"
              ></el-button>
              <el-button
                type="info"
                icon="el-icon-message"
                circle
                @click="edit(key)"
              ></el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</el-col>

支持类型
vue的video插件vue-video-player

vue-video-player
声音问题：如何解决vue-video-playe点击音量的问题

突然发现在chrome下倍速播放有问题，查了好久都不知道为什么，原来是chrome我自己看视频的插件导致的，汗