search

videojs / video.js

Video.js - open source HTML5 video player
https://videojs.com
Other
37.85k stars 7.43k forks source link

VideoJS 7.15.4 - intermittent 403s when using RequestModifier for MpegDash #7469

Closed andygr closed 2 years ago

andygr commented 2 years ago

Description

I have a cloudfront distribution with pre-signed URLs and I am trying to use VideoJS to be able to attach the policy in each request, instead of using signed cookies. For this task I am using custom pre-signed URLs. I have seen in one of the existing issues a suggestion to use videojs.Html5DashJS.hook('beforeinitialize', (player, mediaPlayer) which I tested with 3 different browsers.

I had some intermittent issues with Safari and Chrome but Firefox (v93) seems to be more stable. I pasted the player code in the bottom of the ticket.

Steps to reproduce

  1. Open the player with Chrome and Safari and click play
  2. Sometimes the response is 200 but sometimes is 403

Results

Expected

I am expecting to see the dash URL with the Cloudfront policy in each request (for mpd, init and video/audio files)

Actual

There is an intermittent issue with Chrome and Safari (a mix of 200s and 403s for init.mp4). However with Firefox seems to be ok.

Error output

I attached 2 links where you can see the requests with 200 (when is working) and with 403 by using Chrome

https://cosmonetpublic.s3.eu-west-2.amazonaws.com/play.png https://cosmonetpublic.s3.eu-west-2.amazonaws.com/error.png

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with? 7.15.4

browsers

what browser are affected? Safari Version 14.1.2 (14611.3.10.1.7) & Chrome Version 94.0.4606.71 (Official Build) (x86_64)

OSes

what platforms (operating systems and devices) are affected? MacOS Mojave 10.14.6

plugins

are any videojs plugins being used on the page? No plugins

This is the Player code:

<html>
<head>
    <title>Player</title>
    <meta charset="utf-8">
    <link href="videojs/video-js.css" rel="stylesheet">
    <link href="videojs/videojs-skin.css" rel="stylesheet">
    <link href="videojs/videojs-playlist-ui.css" rel="stylesheet">
    <link href="videojs/horizontal.css" rel="stylesheet">
    <link href="videojs/videojs.errors.css" rel="stylesheet">
    <script src="videojs/video.js"></script>
    <script src="videojs/videojs-flash.min.js"></script>
    <script src="videojs/newskin.js"></script>
    <script src="videojs/videojs-playlist.js"></script>
    <script src="videojs/videojs-playlist-ui.js"></script>
    <script src="videojs/videojs-contrib-quality-levels.min.js"></script>
    <script src="videojs/videojs-hls-quality-selector.min.js"></script>
    <script src="videojs/videojs-bug.min.js"></script>
    <script src="videojs/videojs.errors.js"></script>
    <script src="videojs/dash.all.debug.js"></script>
    <script src="videojs/dash.all.min.js"></script>
    <script src="videojs/videojs-dash.min.js"></script>
</head>
<body>
   <video id=example-video width=640 height=480 class="video-js vjs-default-skin" >
   <source src="https://distribution.cloudfront.net/dash/periodic_test_11438_000_Low_1.mpd?Policy=eyJTdGF0ZW1lbn......E5SFaB6qPezrdjjwIj7cg0mQUU8g~igflw__&Key-Pair-Id=K2R.......N2S" type="application/dash+xml">
   </video>
</div>

<script>

const cacheLink = 'https://distribution.cloudfront.net/dash/periodic_test_11438_000_Low_1.mpd?Policy=eyJTdGF0ZW......0pgEhu21quka7roysbT3sEK6f~2hwwvsWydhK56bLc94HMG3CZSnlA~9DpWNWIjH9LsgpKulHiRvUBXRwlk06~h3Zb2w7F7NQBf~7VJRYoDtPxjmhx4ieyiLVcuRlK7E5SFaB6qPezrdjjwIj7cg0mQUU8g~igflw__&Key-Pair-Id=K2R.....2S';

//Add the Callback hook from above
videojs.Html5DashJS.hook('beforeinitialize', (player, mediaPlayer) => {
      //XHRLoader is the class from dashjs we want to replace/extend
      mediaPlayer.extend('RequestModifier', () => ({
        modifyRequestURL: (url) => {
          const requestURL = new URL(url);
          const baseURL = new URL(cacheLink);
          requestURL.search = baseURL.search;
          return requestURL.href;
        },
      }), true);
    });

var player = videojs('example-video');

player.play();

</script>
</body>
</html>
welcome[bot] commented 2 years ago

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

gkatsev commented 2 years ago

If you're using videojs-contrib-dash 4 or 5, you don't need to include DASH.js separately. However, this also means that we're not actually in charge of playback at all, it's handled fully by DASH.js. Are you able to test your stream on DASH.js's test page? https://reference.dashif.org/dash.js/v4.1.0/samples/dash-if-reference-player/index.html

andygr commented 2 years ago

If you're using videojs-contrib-dash 4 or 5, you don't need to include DASH.js separately. However, this also means that we're not actually in charge of playback at all, it's handled fully by DASH.js. Are you able to test your stream on DASH.js's test page? https://reference.dashif.org/dash.js/v4.1.0/samples/dash-if-reference-player/index.html

I tried with the DASH.js test page and I had the same problem with Chrome and Safari. I will use only videojs-contrib-dash and will test it again.

Thanks

andygr commented 2 years ago

If you're using videojs-contrib-dash 4 or 5, you don't need to include DASH.js separately. However, this also means that we're not actually in charge of playback at all, it's handled fully by DASH.js. Are you able to test your stream on DASH.js's test page? https://reference.dashif.org/dash.js/v4.1.0/samples/dash-if-reference-player/index.html

I changed the html page to use only videojs-contrib-dash but with Safari and Chrome, I had the same issue. The request for MPD was correct (using pre-signed URL), actually 2 requests for init.mp4 were correct as well, but the rest of the requests didn't have the query parameters. However with Firefox was ok.

Same issue with DASH.js player. The error was "Error Dash.js :28" because some requests didn't have the query parameter which require to access the content via Cloudfront. I used DASH.js with all browsers and had the same issue. However the VideoJS player which I host in S3 playing the content via Firefox only.

gkatsev commented 2 years ago

Sounds like it's either an issue with your stream or with dash.js. You'll want to investigate your stream and then open an issue against DASH.js.

andygr commented 2 years ago

The stream is ok because is playing with Firefox, I will open an issue with DASH.js

Thanks

gkatsev commented 2 years ago

If there's a dash.js update with a fix, feel free to ping us in videojs-contrib-dash and we'll be happy to tag a new version.

andygr commented 2 years ago

ok will do it

andygr commented 2 years ago

I created a ticket with Dash.js and their response is the following:

We are not maintaining the video.js library, an example on how to use the requestModifier with plain dash.js can be found here: https://reference.dashif.org/dash.js/nightly/samples/advanced/extend.html Please check if you can reproduce the problem using only dash.js.

I modified the player, as per their suggestion, and is working as expected with all the browsers with Mac OS. Will proceed with Windows as well.