videojs-player icon indicating copy to clipboard operation
videojs-player copied to clipboard

Nothing happened when click to play

Open ghjacky opened this issue 4 years ago • 1 comments

Component always doesn't ready, and it happened nothing when click to play

Version

"vue": "2.6.10" "vue-video-player": "5.0.1" "videojs-flash": "2.1.0"

Steps to reproduce

I just copy the usage example which in repository main page. As below:

main.js
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer)
live.vue
<template>
  <video-player class="video-player-box" ref="videoPlayer" :options="playerOptions" :playsinline="true" custom-event-name="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'
  import 'videojs-flash'

  export default {
    data() {
      return {
        playerOptions: {
          // videojs options
          muted: true,
          language: 'en',
          techOrder: ['flash', 'html5'],
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [
            {
              type: 'rtmp/mp4',
              src: 'rtmp://127.0.0.1:1935/live'
            }],
          poster: '/static/images/author.jpg'
        }
      }
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    mounted() {
      console.log('this is current player instance object', this.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]
      }

What is Expected?

It's expected that the live streaming can play when i click the player.

What is actually happening?

Nothing happened. Without any error and warning and log. Things in console:

this is current player instance object Player {…}

ghjacky avatar May 07 '20 08:05 ghjacky

Sorry, my fault! The flash was disabled by browser default configuration. It's so weird, the broswer didn't show the prompt. Anyway, it's worked now! Sorry

ghjacky avatar May 07 '20 09:05 ghjacky