videoElement not working after fork

Community Help
1

In:

there is a:
videoElement =

When forking this (very nice :slight_smile: ) project, the video does not load… I experimented a bit, an it seems there is a problem with the “crossorigin=anonymous” . Removing this makes the video load, but the rotating globe still does not work :slightly_frowning_face:

Is there a way to make this work on the forks?

2

hi @martinyt , it looks like the notebook author (Jeremy) is hosting the video file on an AWS bucket blocking anything that is not allowed by its CORS policy, I guess only Observable employees?
you could host the video on another server, here is a test using imgur

Go ahead and replace the cell with

videoElement = html`<video style="display: block; height: 150px;" crossorigin=anonymous controls autoplay muted loop>
  <source src="https://i.imgur.com/MfKJpQ2.mp4"/>
</video>`
2 Likes
3

Hey! Thanks a lot. You are right. now it works. :smiley:
I am actually hosting this video on a web-server, but I still could not get it loading on obserable… I guess that has something to do with the settings on my web-server? I would like to replace the video with my own, so if you have any tips on how to set up a server for sharing videos this way - I would appreciate it :smiley:

Thanks!

4

Your server needs to set an access-control-allow-origin header.

1 Like
5

Do you know if it is possible to file-attach a .mp4 file? I can not find an example of this at File Attachments / Observable / Observable or any other place. Seems that fileAttachent does not have a video function, or?

6

Yes it’s possible, I often use it, for example here: Detached video controls / Sylvain Lesage / Observable.

Related: you might be interested by videoInput in Media Input / Dennis Heihoff / Observable : it allows to specify an URL, and returns a Video element. You can provide it a “real” URL, upload a video, or reference a FileAttachment("…").url()

2 Likes
7

Nice, thanks! I was able to find a good solution for sharing a video from a server with the access-control-allow-origin statement in a .htaccess file. But I will keep this in mind to next time :smiley:

Thanks