[Vuejs]-Not able to playback Mux assets in vue.js app

by

0👍

This is working for me:

<template>
    <div>
        <h1>Video</h1>
        <video id="myVideo" controls></video>
    </div>
</template>


<script>
import Hls from 'hls.js'
console.log('Hsl', Hls)

export default {
    name:"Video",

    mounted() {
         (function(){
            // Replace with your asset's playback ID
            var playbackId = "XXXXXXXXXXXX"
            var url = "https://stream.mux.com/"+playbackId+".m3u8"
            var video = document.getElementById("myVideo")

            let hls = new Hls()
            hls.loadSource(url)
            hls.attachMedia(video)

        })()
    },

}
</script>

0👍

I found that the example on the hls site worked well, particularly as it has a fallback for when hls is not supported (ios)

https://github.com/video-dev/hls.js/#embedding-hlsjs

in my nuxt app, i adpated to this:

  mounted() {
    // https://github.com/video-dev/hls.js/#embedding-hlsjs
    const videoSrc = `https://stream.mux.com/${this.playbackId}.m3u8`
    // var video = document.getElementById('myVideo')
    const video = this.$refs.video

    if (Hls.isSupported()) {
      let hls = new Hls()
      hls.loadSource(videoSrc)
      hls.attachMedia(video)
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc
    }
  },

where playbackId is set as a computed value

Leave a comment