Video.js: 'Access-Control-Allow-Origin‘

Created on 16 Jan 2017 · 8Comments · Source: videojs/video.js

I want to play .m3u8 files with video.js.

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>videojs-contrib-hls embed</title>

  <link rel="stylesheet" href="video-js.min.css">
  <script src='video.js'></script>
  <script src='videojs-contrib-hls.min.js'></script>
</head>
<body>
  <h1>Video.js Example Embed</h1>

  <video id="my_video_1" 
      class="video-js vjs-default-skin" 
      controls 
      preload="auto" 
      width="640" 
      height="268" 
      data-setup='{"example_option":true}'>
  <source src="http://hlsws.abc.com/live/1484555851/playlist.m3u8" type="application/x-mpegURL">
  </video>
  <script>
  </script>

</body>
</html>

Then I suggest this mistake

XMLHttpRequest cannot load http://hlsws.sinashow.com/live/88076461_1484555851/playlist.m3u8. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:81' is therefore not allowed access. The response had HTTP status code 404.

Why is this so? Should be how to do

Source

cytGitHub

Most helpful comment

I use the CORS FreeIPTV chrome extension
https://chrome.google.com/webstore/detail/cors-freeiptv/fickmiiogfnojlhegfhkilcpefoophgi
It works ok

pedrazzi on 11 Jun 2018

👍2 👎1

All 8 comments

You need to configure the server at hlsws.sinashow.com to add the 'Access-Control-Allow-Origin' header when it responds. Alternatively, host the HLS at the same domain as the page in which case the header is not needed.

See http://enable-cors.org for some background info on cross origin resource sharing and instructions on setting up the headers on some common servers.

mister-ben on 16 Jan 2017

video.min.js:19 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. e {code: 4, message: "No compatible source was found for this media."}code: 4message: "No compatible source was found for this media."__proto__: Objecti @ video.min.js:19e.error @ video.min.js:19b.error @ video.min.js:16(anonymous function) @ video.min.js:16e @ video.min.js:19

When I add the Access-Control-Allow-Origin, the console found this thing, does not support this source, I do not need to use other videojs plug-ins? @mister-ben

cytGitHub on 20 Jan 2017

@mister-ben
I chrome browser testing will be reported on this mistake, but in the mobile end did not have this problem This is why?

cytGitHub on 20 Jan 2017

@mister-ben Thank you for your reminder 。 When I use the 4.2 version of the videojs play hls flow, there will always be Caton phenomenon. I suspect that there may be flow in the analytical performance problems?

cytGitHub on 20 Jan 2017

Sorry, I don't entirely understand. If 4.2 is the video.js version you are using, that's very old.

How does your stream play at http://videojs.github.io/videojs-contrib-hls ? Is http://hlsws.abc.com/live/1484555851/playlist.m3u8 the real URL you are using?

mister-ben on 20 Jan 2017

@cytGitHub Have you solved your problem?