Set crossorigin attr programmatically

[alexlopez-natgeo]

Description

I've been struggling with the crossorigin attribute; right now the implementation I have is a playlist, the first video should not have such attribute but the second does and I have tried multiple ways like:

• player.setAttribute('crossorigin', 'anonymous')
• player.el_.setAttribute('crossorigin', 'anonymous')
• player.setAttribute('cors', 'anonymous')

even pass it like

const options = {
  crossorigin: 'anonymous',
  cors: 'anonymous',
}

videojs(node, options)

So at this point, I wonder if there an API to do this (I found nothing on the documentation, and the source code only relates to this for close caption)

Additional Information

videojs 7

browsers all

OSes all

plugins none,

just programmatically trying to set for the next video

I'm aware that a workaround might be set it for the video tag and use another video tag later, but I was looking to pass it programmatically in a more elegant way... maybe creating a plugin that applies it automatically after checking the source or else.

[welcome[bot]]

👋 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.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alexlopez-natgeo]

Hi @gkatsev any reason for this to be a wontfix? will you accept a PR ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gkatsev]

Oops, this is definitely something that we want to have.

[greenpdx]

Goal: Using tensorflowjs and opencv wasm create a browser based machine learning platform for video. BUT

I am having the problem with crossOrigin. I am trying to debug it in firefox. The network trace for this movie is not updating so I can not see the headers but access to another file in the same directory has (copy paste sucks) Access-Control-Allow-Origin | * -- | -- so I am relatively sure it is set for this access

my video options are

videoOptions: {
        controls: true,
        fluid: true,
        preload: 'metadata',
        crossOrigin: "Anonymous",
        preload: "none",
        sources: [
        ]
      }

the code getting the video, using vue is

      let vvp = this.$refs.video
      let vid = vvp.player
      vid.pause()
      let vidEle = vid.children_[0]
      console.log(vvp, vid, vidEle)

the vid object has options.crossOrigin: "Anonymous"

and the vidEle has tag is

<video id="vjs_video_536_html5_api" class="vjs-tech" tabindex="-1" preload="none" src="http://10.0.42.105/url.mp4" crossorigin="Anonymous"> 

and looking at the object it self I see crossOrigin: "anonymous"

so everything I read state it should work. but is still get DOMException: "The operation is insecure."

[gkatsev]

In addition to making sure that the video element gets the option set appropriately, we should make sure that when crossorigin is set to "use-credentials", TextTrack sets withCredentials on the XHR it makes. We probably also want to update VHS to honor this option and set withCredentials on its XHRs as well.

[greenpdx]

Thanks, That helps

[gkatsev]

I wrote up some more direction on here: https://github.com/videojs/video.js/pull/5682#issuecomment-447040474

[khavishbhundoo]

@gkatsev

Any update on this issue

[gkatsev]

Video.js 7.8 pre-release has a new option and method to set the crossorigin attribute/crossOrigin property thanks to @citosid and @sodabrew.

[khavishbhundoo]

@gkatsev

I added cross origin as follows : <video-js id="player" class="video-js vjs-big-play-centered" crossorigin="use-credentials">

The cookies are being sent properly with crossorigin="use-credentials" for video/mp4 sources but not for application/dash+xml sources

[gkatsev]

We have not integrated this into VHS yet, for now, for DASH/HLS you'll need to set withCredentials, see https://github.com/videojs/http-streaming/#initialization for a couple examples.

[khavishbhundoo]

@gkatsev

I am already using withCredentials but for some reason cookies are not being sent

Player is setup as follows HTML

<video-js id="player" class="video-js vjs-big-play-centered" crossorigin="use-credentials">
<source  src="data:application/dash+xml;charset=utf-8;base64,PE1QRCB4bWxucz0id...." type="application/dash+xml">
</video-js>

`

 player = window.player = videojs('player', {
            withCredentials: true,
            controls : true,
            fluid: true,
            controlBar: {
                children: ['playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'settingMenuButton', 'qualitySelector','fullscreenToggle']
            },
            preload : 'auto',
        });

[gkatsev]

VHS isn't configured as a top level option for Video.js.

Try:

 player = window.player = videojs('player', {
            html5: {
                        hls: {
                                    withCredentials: true,
                        }
            },
            controls : true,
            fluid: true,
            controlBar: {
                children: ['playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'settingMenuButton', 'qualitySelector','fullscreenToggle']
            },
            preload : 'auto',
        });

(also, ignore the fact that it says hls, it'll apply to dash too (I think dash may work but I'm not positive).

[khavishbhundoo]

@gkatsev I tried just now and unfortunately its not working for dash.Its a minimal setup with just main videojs.

[itayganor]

No solution for this? ima is literally unusable from localhost

[sodabrew]

The master branch should have the code you need already, hopefully a 7.8.2 release will be forthcoming, but in the mean time you could npm install from master at this revision:

npm install --save "github:videojs/video.js#a4ea1f9657e1f36471e20225526d0460e77f8b40"

[sodabrew]

Heads up that the 7.8.2 does not include the necessary code from master: https://github.com/videojs/video.js/commits/7.8.x

[gkatsev]

Version 7.8 includes crossorigin support. The change in a4ea1f9657e1f36471e20225526d0460e77f8b40 while classified as a fix feels more like a minor level thing.

I'm currently looking at #6640 and will likely release 7.9 afterwards.

[gkatsev]

Also, wanted to add. The reason why this was kept open because there were basically 3 phases for this and only one is currently released, second is merged, and third isn't started yet:

1. [x] make crossOrigin be able to be set programmatically
2. [x] make text tracks work with this crossOrigin property (https://github.com/videojs/video.js/pull/6588)
3. [ ] set up VHS to work with this crossOrigin property without needing to set withCredentials on the source object separately.

[sodabrew]

Such as this ticket? https://github.com/videojs/http-streaming/issues/767

[avanrietschoten]

Hello All from Video in Spain,

What is the current status of CrossDomain handling on latest videojs Version? I have been fighting for the past weeks getting AWS S3, CloudFront and signed cookies to work. When I switch off 'Restrict Viewer Access' all works, when I switch it on and use a signed URL it works, just cant get the signed cookies to work. It appears Cloudfront receives no cookies (not seen in the log with cookies logging on), and I get cross domain verification issues. I need to admit I also cant get it to work with jwplayer, but ideally wanted to use videojs.

[sonicpunk]

I am sorry to report that I attempted all of the methods described above, but can also not get access to the file (HLS - .m3u8) because the domain where we store the video files different is than the origin (CORS).

using Video.js 7.11.4

Tried various combinations:

 let player = videojs('#testplayer', {
          fill: true,
          preload: 'none',
          crossOrigin: 'use-credentials',
          withCredentials: true,
                html5: {
                    hls: {
                        withCredentials: true,
                    }
                },
 });

player.src({
       withCredentials: true
})

[dijonkitchen]

https://github.com/videojs/http-streaming/#initialization has it as vhs not hls:

// html5 for html hls
videojs(video, {
  html5: {
    vhs: {
      withCredentials: true
    }
  }
});

[lukedukeus]

Has anyone found docs on how to set the cors header?

[DedaDev]

const player = videojs(element, options)
player.crossOrigin('anonymous')

[khavishbhundoo]

I tried the following with dash because i need to send cookies and it unfortunately still doesn't work

player.crossOrigin('use-credentials')

[khavishbhundoo]

VHS isn't configured as a top level option for Video.js.

Try:

 player = window.player = videojs('player', {
            html5: {
                        hls: {
                                    withCredentials: true,
                        }
            },
            controls : true,
            fluid: true,
            controlBar: {
                children: ['playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'settingMenuButton', 'qualitySelector','fullscreenToggle']
            },
            preload : 'auto',
        });

(also, ignore the fact that it says hls, it'll apply to dash too (I think dash may work but I'm not positive).

@sonicpunk Try the configuration above and add crossorigin="use-credentials" to the <video> tag and it should work for hls but not with dash.

cc @gkatsev

[gbrivate]

Have someone found any solution? I'm trying to play video from S3, by using cookie signed, can't get it working at all, I did a workaround, but honest, I'd like to set it via cookies.

btw, the workaround I made was this one:

I just could do it buy using this version:

videojs.Hls.xhr.beforeRequest = function (options) {
    options.uri = options.uri+'?'+fullCookieUrl;
    return options;
 };

fullCookieUrl => contain all the cookies values from S3, so as you can see, I send those as queryparam as well, its basic a s3 signed url using cookie values.

https://s3-cloudfrontdomain.net/video.m3u8?Policy=....&Signature=......&Key-Pair-Id=..... https://s3-cloudfrontdomain.net/video1.ts?Policy=....&Signature=......&Key-Pair-Id=..... https://s3-cloudfrontdomain.net/video2.ts?Policy=....&Signature=......&Key-Pair-Id=..... etc,

but I really want to do it via Cookie 😞