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

Question

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.

score 2 · Answer 1 · answered Apr 20 '22 at 15:41

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.

score 1 · Answer 2 · answered Mar 25 '16 at 18:20

1

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

answered Mar 25 '16 at 18:20

misterben

7,455
2
26
47

score 1 · Answer 3 · answered Jun 04 '20 at 08:18

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>

score 0 · Answer 4 · answered Nov 06 '22 at 23:27

There is a bug with video-js with type application/x-mpegURL when you set source dynamically.

Video player (Don't give it a source)

<video 
  id="my_video_1" 
  class="video-js vjs-default-skin vjs-big-play-centered" 
  controls 
  preload="auto" 
  muted>
</video>

Import CSS for video player

<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>

<script>

  var player = videojs('my_video_1');
        
  player.src({
    src: '/media/movies/playlist.m3u8',
    type: 'application/x-mpegURL'
  });

  player.load();
  player.play();

</script>

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

4 Answers4