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

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.

Solution 1:^[1]

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

Solution 2:^[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>

Solution 3:^[3]

Specified "type" attribute of "application/x-mpegURL" is not supported.

I had this problem in FF with video.js 7.10.2 and a livestream. After removing the source element from inside the video element in HTML and adding the logic to do the same in JS, it's now working (seems to go a different route internally, preventing browser trying to load the source itself):

var player = videojs('livestream');
player.src({ type: "application/x-mpegurl", src: vidURL });
player.ready(function(){
  player.muted(true);
  player.play();
});

Note: the HLS lib mentioned in other answers is no longer required because it's included in video.js now.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	misterben
Solution 2	Raj
Solution 3	movAX13h

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]