I’m trying to play a live stream using Video.js in a Vue.js application, but I’m encountering the following error:

  VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either 
  because the server or network failed or because the format is not supported.

Here’s the code I’m using:

<template>
  <video ref="videoPlayer" id="videoPlayer" class="video-js"></video>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const videoPlayer = ref(null);
let player = null;

onMounted(async () => {
  player = videojs(videoPlayer.value, {
    autoplay: true,
    controls: true,
    sources: [
      {
        src: 'http://82.212.74.2:8000/live/7407',
        type: 'application/x-mpegURL',
      },
    ],
  });
});
</script>

The stream URL (http://82.212.74.2:8000/live/7407) works perfectly in VLC Player, and VLC shows that the stream is H264 - MPEG-4 AVC.

How can I solve this issue I would really appreciate the help..

I’m trying to play a live stream using Video.js in a Vue.js application, but I’m encountering the following error:

  VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either 
  because the server or network failed or because the format is not supported.

Here’s the code I’m using:

<template>
  <video ref="videoPlayer" id="videoPlayer" class="video-js"></video>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const videoPlayer = ref(null);
let player = null;

onMounted(async () => {
  player = videojs(videoPlayer.value, {
    autoplay: true,
    controls: true,
    sources: [
      {
        src: 'http://82.212.74.2:8000/live/7407',
        type: 'application/x-mpegURL',
      },
    ],
  });
});
</script>

The stream URL (http://82.212.74.2:8000/live/7407) works perfectly in VLC Player, and VLC shows that the stream is H264 - MPEG-4 AVC.

How can I solve this issue I would really appreciate the help..

• vue.js
• frontend
• html5-video
• video.js
• live-streaming

Share Improve this question Follow edited Mar 24 at 13:42 omar ba44 asked Mar 24 at 3:04 omar ba44omar ba44 3333 silver badges88 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

This is an mpegts stream, not HLS, which application/x-mpegURL represents. Video.js doesn't play that, and there is no native browser support. There is an mpegts.js library which may work (I haven't used it), but it's more usual to convert to HLS for browser playout.

I’m trying to play a live stream using Video.js in a Vue.js application, but I’m encountering the following error:
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

Your stream location is http:// so it cannot load into a page that starts with https://.

The solution is to use a proxy script/code from your server to access the stream at its http location and then return the bytes back into your app.

PS: As mentioned in the other Answer, your bytes are in .ts format. You need to use a TS player like the one that was recommended (or else if you understand M3U8 structure, just create a temporary M3U8 data as a String and turn into URL using createobjecturl, then pass that to VideoJS).