m3u8 source for video.js error: "No compatible source and playback technology were found."

javascript video.js m3u8

12,080

Solution 1

You need to include videojs-contrib-hls to add HLS support for browsers without native support. Example

Solution 2

I am not sure if you still need the answer but ill post it anyways (since i spent 1 whole day i hope this will help someone).

follow these steps... (my project is in vuejs)

npm install vue-videojs7 --save

in your file do this.

<template>
  <div class="player">
    <h3>Using Html5 to play m3u8 media file</h3>
    <video-player ref="videoPlayer"
                  class="vjs-custom-skin"
                  :options="playerOptions"
                  @play="onPlayerPlay($event)"
                  @ready="onPlayerReady($event)">
    </video-player>
  </div>
</template>

<script>
import Vue from 'vue'
import { videoPlayer } from 'vue-videojs7'
import videojs from 'video.js'

export default {
  components: {
    VideoPlayer
  },
  data () {
    return {
      playerOptions: {
        autoplay: true,
        controls: true,
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        }
        // poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg'
      }
    }
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    onPlayerPlay (player) {
      console.log('player play!', player)
    },
    onPlayerReady (player) {
      console.log('player ready!', player)
      this.player.play()
    },
    playVideo: function (source) {
      const video = {
        withCredentials: false,
        type: 'application/x-mpegurl',
        src: source
      }
      this.player.reset() // in IE11 (mode IE10) direct usage of src() when <src> is already set, generated errors,
      this.player.src(video)
      // this.player.load()
      this.player.play()
    }
  },
  mounted () {
    const src = 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'
    this.playVideo(src)
  }
}
</script>

12,080

Author by

LJ in NJ

Updated on June 09, 2022

Comments

LJ in NJ almost 2 years

I have a m3u8 source that I am trying to play via a video.js player. When I try it, I see a black screen and the console log has the message " "No compatible source and playback technology were found." This is the HTML:

<html>
  <head>
    <title>Test Player</title>
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"
type="test/css">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
  </head>
  <body>
    <h3>Using m3u8 source</h3>
    <video id="example_video_1" class="video-js vjs-default-skin" controls
    autoplay width="640" height="360" data-setup="{}">
       <source
        src="http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8"
        type="application/x-mpegURL" />
    </video>
  </body>
</html>

The type is correct (i.e., "application/x-mpegURL") and I don't see any indication of a CORS issue. I've test with both Chrome and Firefox browsers with identical results. Any suggestions would be most appreciated.