×

聊聊vue里的视频播放器插件Vue-Video-Player的应用

作者:Terry2020.12.02来源:Web前端之家浏览:14614评论:0
关键词:jsvue

500.jpg

我们在HTML5播放器,都是用video标签去实现,但是在vue里,我们怎么去应用呢?今天就介绍下关于vue里的播放插件Vue-Video-Player的应用。我们先看下它的应用代码:

<video-player
   class="video-player vjs-custom-skin"
   ref="videoPlayer"
   :playsinline="true"
   :options="playerOptions"
></video-player>

跟video很有点类似,它有一些参数:

playerOptions: {
    height: 400,
    playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
    autoplay: false, // 如果true,浏览器准备好时开始回放。
    muted: false, // 默认情况下将会消除任何音频。
    loop: false, // 导致视频一结束就重新开始。
    preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
    language: "zh-CN",
    aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
    fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
    sources: [
     {
      type: "video/mp4", // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
      src: require("@/assets/vedio.mp4") // url地址
     }
    ],
    poster: require("@/assets/poster.png"), // 你的封面地址
    // width: document.documentElement.clientWidth, //播放器宽度
    notSupportedMessage: "此视频暂无法播放,请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
    controlBar: {
     timeDivider: true,
     durationDisplay: true,
     remainingTimeDisplay: false,
     fullscreenToggle: true // 全屏按钮
    }
},

安装

CDN

<link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/>
<script type="text/javascript" src="path/to/video.min.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-video-player.js"></script>
<script type="text/javascript">
  Vue.use(window.VueVideoPlayer)
</script>

NPM

npm install vue-video-player --save

全局安装

import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
 
// require videojs style
import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'
 
Vue.use(VueVideoPlayer, /* {
  options: global default options,
  events: global videojs events
} */)

与组件一起安装

// require styles
import 'video.js/dist/video-js.css'
 
import { videoPlayer } from 'vue-video-player'
 
export default {
  components: {
    videoPlayer
  }
}

用ssr挂载

// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {
  const VueVideoPlayer = require('vue-video-player/dist/ssr')
  Vue.use(VueVideoPlayer)
}

videojs扩展

import videojs from 'video.js'
 
// videojs plugin
const Plugin = videojs.getPlugin('plugin')
class ExamplePlugin extends Plugin {
  // something...
}
videojs.registerPlugin('examplePlugin', ExamplePlugin)
 
// videojs language
videojs.addLanguage('es', {
  Pause: 'Pausa',
  // something...
})
 
// more videojs api...
 
// vue component...

差异(使用方法的异同)

SSR和SPA使用的唯一区别是:

  • SPA由工作,由component查找videojs实例ref attribute

  • SSR工作于directive,找到videojs实例directive arg

  • 其他配置,事件是相同的。

SPA

<template>
  <video-player  class="video-player-box"
                 ref="videoPlayer"
                 :options="playerOptions"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"
 
                 @play="onPlayerPlay($event)"
                 @pause="onPlayerPause($event)"
                 @ended="onPlayerEnded($event)"
                 @waiting="onPlayerWaiting($event)"
                 @playing="onPlayerPlaying($event)"
                 @loadeddata="onPlayerLoadeddata($event)"
                 @timeupdate="onPlayerTimeupdate($event)"
                 @canplay="onPlayerCanplay($event)"
                 @canplaythrough="onPlayerCanplaythrough($event)"
 
                 @statechanged="playerStateChanged($event)"
                 @ready="playerReadied">
  </video-player>
</template>
 
<script>
  // Similarly, you can also introduce the plugin resource pack you want to use within the component
  // import 'some-videojs-plugin'
  export default {
    data() {
      return {
        playerOptions: {
          // videojs options
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }],
          poster: "/static/images/author.jpg",
        }
      }
    },
    mounted() {
      console.log('this is current player instance object', this.player)
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      // ...player event
 
      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },
 
      // player is ready
      playerReadied(player) {
        console.log('the player is readied', player)
        // you can use it to do something...
        // player.[methods]
      }
    }
  }
</script>

SSR

<!-- You can custom the "myVideoPlayer" name used to find the videojs instance in current component -->
<template>
  <div class="video-player-box" 
       @play="onPlayerPlay($event)"
       @pause="onPlayerPause($event)"
       @ready="playerReadied"
       @statechanged="playerStateChanged($event)"
       v-video-player:myVideoPlayer="playerOptions">
  </div>
</template>
 
<script>
  export default {
    mounted() {
      console.log('this is current videojs instance object', this.myVideoPlayer)
    }
    // Omit the same parts as in the following component sample code
    // ...
  }
</script>

问题

videojs-contrib-hls-未定义e

API

  • 组件API:

    • events::[ Array, default: [] ]组件的自定义videojs事件

    • playsinline::[ Boolean, default: false ]将播放器设置为不在移动设备中全屏显示

    • crossOrigin[ String, default: '' ]:集crossOrigin视频

    • customEventName[ String, default: 'statechanged' ]:自定义状态变化事件名称

  • video.js API 【https://docs.videojs.com/】

  • videojs插件

    • video.js选项

    • video.js文档

  • videojs分辨率切换器

  • videojs-contrib-hls

  • videojs-youtube

  • videojs-vimeo

  • videojs-热键

  • videojs-flash

  • videojs-contrib-ads

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vue20201202a234234.html

网友评论文明上网理性发言 已有0人参与

发表评论: