set source src dynamically from API

[munirot]

Vue.js version and component version

"nuxt": "^2.6.3"

What is Expected?

Set sources src to dynamic src fetch from API

What is actually happening?

I want to set dynamic src to the player where I got the link from my API where I store in the data state (media.url). With this library, I've tried to set the source url I stored in media.url to the player source when created

<template>
  <div id="app">
    <div class="player-container">
       <video-player
              ref="videoPlayer"
              class="video-player vjs-custom-skin"
              :playsinline="true"
              :options="playerOptions"
              @play="onPlayerPlay($event)"
              @pause="onPlayerPause($event)"
        />
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      media: {
        url: ""
      },
     playerOptions: {
        autoplay: true,
        muted: false,
        loop: false,
        preload: "auto",
        aspectRatio: "16:9",
        fluid: true,
        sources: [
          {
            // type: 'application/x-mpegURL',
            src: ""
          }
        ],
        hls: true,
        notSupportedMessage:
          "This video cannot be played for the time being. Please try again later.",
        controlBar: {
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true
        }
      },
    }
  },

  created(){
    this.setVideoUrl();
  },

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

  methods: {
    setVideoUrl(){
      let src = this.playerOptions.sources[0].src

      src = 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'
    },
  }
  },
}
</script>

I got the blank canvas, and when I inspect element, I see the html5 video-tag does not include src in it. How to do it?

[Bwijn]

I have the same problem and i using the Nuxt: Make the request in function 'asyncdata' , but it failed because Nuxt is SSR error info is:

info is not defined

😢😢😢

<template>
  <v-app>
    <div class="video-player-box"
         @play="onPlayerPlay($event)"
         @pause="onPlayerPause($event)"
         @ready="playerReadied"
         @statechanged="playerStateChanged($event)"
         v-video-player:myVideoPlayer="this.playerOptions">
    </div>

  </v-app>
</template>
<script>
import Vue from 'vue'
import 'video.js/dist/video-js.css'
import axios from "@/.nuxt/axios";

if (process.browser) {
  window.videojs = require('video.js')
  require('video.js/dist/lang/zh-CN')

  const Vplayer = require('vue-video-player/dist/ssr')
  Vue.use(Vplayer)

  const hls = require('videojs-contrib-hls')
  Vue.use(hls)

}

export default {
  data() {
    return {

      playerOptions: {
        hls: true,  //启用hls？
        // fluid: true,  //设置播放器为流体  宽度为外层盒子大小  ps：想设置width：100%找不到方法？这个就对了
        // muted: false,
        language: 'zh-CN',

        // playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'application/x-mpegURL',
          src: this.info.url
        }],
        poster: '/static/v.png',
      }
    }
  },

  beforeCreate() {
    // this.$axios.get(`/video/1`).then(res=>{
    //   this.playerOptions.sources[0].src = res.data.url
    //
    // })

  },

  methods: {
    watchVideo() { 
      this.playerOptions.sources[0].src = "https://mei.huazuida.com/20200104/20705_f63cddc7/index.m3u8"
    },
    // 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]
    }
  },

  // async asyncData({params ,$axios}) {
  //   // console.log(await axios.get('https://api.myjson.com/bins/1dkbio'))
  //   let {data} = await $axios.get('/video/' + params.id)
  //   return {info: data}
  // }

}
</script>

[arifwidip]

For Nuxt.js, i can't make the SSR working. So, I'm using the client only plugin. This is my plugin file

import Vue from 'vue'
import videojs from 'video.js'
window.videojs = videojs

// No need to require videojs-contrib-hls as videojs v7 already support hls streaming

const VueVideoPlayer = require('vue-video-player/dist/vue-video-player')
Vue.use(VueVideoPlayer)

Set the plugins in nuxt.config.js

...
plugins: [
    {
      src: '~/plugins/nuxt-video-player-plugin.js',
      mode: 'client'
    },
...