zoukankan      html  css  js  c++  java
  • vue.js 视频播放

    最近心学习vue.js开发,video开发播放!

    使用第三方的封装:https://www.npmjs.com/package/vue-video-player

    1. npm install vue-video --save 安装播放第三方插件;

    2.在main.js中

    import VueVideoPlayer from 'vue-video-player'
     
    Vue.use(VueVideoPlayer)
     

    3.使用vue里边

    import { videoPlayer } from 'vue-video-player'
     
    //声明组建
    components: {
    Header,
    videoPlayer
    }
     
    使用
    <template>
      <video-player  ref="videoPlayer"
                     :options="playerOptions"
     
                     title="you can listen some event if you need"
                     @play="onPlayerPlay($event)"
                     @pause="onPlayerPause($event)"
                     @ended="onPlayerEnded($event)"
                     @loadeddata="onPlayerLoadeddata($event)"
                     @waiting="onPlayerWaiting($event)"
                     @playing="onPlayerPlaying($event)"
                     @timeupdate="onPlayerTimeupdate($event)"
                     @canplay="onPlayerCanplay($event)"
                     @canplaythrough="onPlayerCanplaythrough($event)"
     
                     title="or listen state change"
                     @statechanged="playerStateChanged($event)"
     
                     title="The prepared event will be triggered after the videojs program instance completes, and its callback player object is the videojs callback function in this context"
                     @ready="playerReadied">
      </video-player>
    </template>
     
    <script>
      // Similarly, you can also introduce the plugin resource pack you want to use within the component
      // require('some-videojs-plugin')
      export default {
        data() {
          return {
            playerOptions: {
     
              // component options
              start: 0,
              playsinline: false,
     
              // 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>
     
     
    
    
  • 相关阅读:
    eval(data)和eval("("+data+")")的区别
    来自 119.*.*.*的回复: TTL 传输中过期
    小伙伴们,我们一起奋斗吧
    计算机专业学习课程推荐
    sysbench使用教程【转载】
    Docker学习笔记 — Docker私有仓库搭建【转载】
    Linux设置静态IP【转】
    聊一聊PV和并发、以及计算web服务器的数量的方法【转】
    Linux常用Shell脚本珍藏【转载】
    戏说云计算之PaaS,IaaS,SaaS【转载】
  • 原文地址:https://www.cnblogs.com/PeterWolf/p/7244473.html
Copyright © 2011-2022 走看看