vue-video-player---vue中实现视频播放

这是一个字符串，用于设置浏览器在页面加载元素后是否应该开始下载视频数据。: 这是一个布尔值，用于控制播放器是否应该按比例缩放以适应其容器。: 这是一个布尔值，用于设置视频是否在页面加载完成后自动播放。时，播放器将具有流体大小，能够根据容器尺寸动态调整自身大小。: 这也是一个布尔值，用于控制视频是否默认静音。: 这是一个数组，用于设置可选的播放速度。: 这是一个字符串，用于设置播放器的语言。: 这是

cln_clnna

707人浏览 · 2024-05-22 16:44:32

cln_clnna · 2024-05-22 16:44:32 发布

安装

npm install vue-video-player --save

main.js配置

import VideoPlayer from 'vue-video-player'

//引入样式

import 'vue-video-player/src/custom-theme.css'

import 'video.js/dist/video-js.css'

import 'videojs-contrib-hls'

//使用组件

Vue.use(VideoPlayer)

组件书写

<template>
  <div class="video-play-box" style="width: 100%; height: 100%">
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        @ready="onPlayerReady"
        @play="onPlayerPlay"
        @timeupdate="onPlayerTimeupdate"
        @pause="onPlayerPause"
        @ended="onPlayerEnded"
      >
      </video-player>
  </div>
</template>
<script>
export default {
  name: 'videoboPlayer',
  components: {},
  data() {
    return {

      playerOptions: {
         //视频url设置,两种类型，MP4和m3u8
            sources: [
              {
                src: 'https://ewe.weewe.mp4',
                type: 'video/mp4', // mp4视频类型
                // src: 'https://ewe.weewe.m3u8',
                // type: 'application/x-mpegURL' //m3u8 视频类型，这里可以不写，如果写一定要写对，否则会无法播放
              }
            ],
            playbackRates: [0.5, 1.0, 1.5, 2.0], // 开启倍速，不开启倍速可以写个空数组
            fluid: true, // 当 fluid 设置为 true 时，Video.js 播放器将拥有流体大小，即它会根据容器的尺寸动态地调整自身的大小
            autoplay: false, // 是否自动播放
            muted: false,  // 是否静音播放
            controls: true,  // 是否展示控制栏
      },

    }
  },

  methods: {
    onPlayerReady(player) {
      let _self = this
      console.log('Player is ready!', player)

    },
    onPlayerPlay(player) {
      console.log('开始播放')
      // 设置初始播放位置
      player.currentTime(this.currentTime)
      
    },
    onPlayerTimeupdate(player) {
      // console.log('播放中', this.nowCurrentTime)

     
    },
    onPlayerPause(player) {
      console.log('暂停播放')

    },
    onPlayerEnded(player) {
      
      // 播放完毕

    },


  }
}
</script>

注意：class="video-player vjs-custom-skin" 这个必须写

playerOptions常用配置项

playbackRates: 这是一个数组，用于设置可选的播放速度。例如，[0.7, 1.0, 1.5, 2.0] 表示播放器可以支持 0.7 倍速、正常速度、1.5 倍速和 2.0 倍速播放1。
autoplay: 这是一个布尔值，用于设置视频是否在页面加载完成后自动播放。如果为 true，则浏览器准备好时会开始播放视频12。
muted: 这也是一个布尔值，用于控制视频是否默认静音。如果为 true，则视频默认无声音12。
loop: 当这个选项为 true 时，视频会在播放结束后自动重新开始12。
preload: 这是一个字符串，用于设置浏览器在页面加载元素后是否应该开始下载视频数据。例如，'auto' 表示浏览器将选择最佳行为，可能立即开始加载视频12。
language: 这是一个字符串，用于设置播放器的语言。例如，'zh-CN' 表示简体中文12。
aspectRatio: 这是一个字符串，表示播放器的宽高比，例如 '16:9' 或 '4:3'。它用于确保播放器在调整大小时保持正确的比例12。
fluid: 这是一个布尔值，用于控制播放器是否应该按比例缩放以适应其容器。当设置为 true 时，播放器将具有流体大小，能够根据容器尺寸动态调整自身大小。
poster：这是一个字符串，用于设置播放器的封面。