search

thexerteproject / xerteonlinetoolkits

Xerte Online Toolkits
www.xerte.org.uk
Apache License 2.0
62 stars 61 forks source link

Lack of consistency in what can be used as video source in the various video pages #1074

Closed FayCross closed 1 year ago

FayCross commented 2 years ago

From forum: https://xerte.org.uk/index.php/en/forum/general-chat/2806-interactive-video-can-i-use-a-url#7924

There's no consistency in what can be used as the source for videos when using a video on YouTube. For example, the video page will accept https://www.youtube.com/watch?v=msTEuI0eLZA (URL from browser address bar), https://youtu.be/msTEuI0eLZA (URL shown when you click share button) and embed code. Media Lesson & Interactive Video pages will only work with the first of these. If it's not possible for them to use all of these then we should put guidance in editor.

JohnSmith-LT commented 2 years ago

Hi @FayCross and @ronm123 this commit possibly has the chance to break the most LOs so probably needs testing with a lot of LOs that contain videos, across all the pages that can have video added.

I've basically intercepted all the video URLs and if any match a current YouTube or Vimeo format then the URL will be changed into the most basic of each URL. Currently i've tested with the 43x different Youtube formats below and the 9x Vimeo ones and in my basic testing they all seem to work now across all video pages (I haven't done the Youtube page model yet but is there any reason not to??)

Anyway, if it doesn't match either then it should fail gracefully and just pass whatever URL has been entered so uploaded video still appears to work fine.

Here are some examples of the URLs that it will match and work with:

https://www.youtube.com/watch?v=DFYRQ_zQ-gk&feature=featured https://www.youtube.com/watch?v=DFYRQ_zQ-gk http://www.youtube.com/watch?v=DFYRQ_zQ-gk //www.youtube.com/watch?v=DFYRQ_zQ-gk www.youtube.com/watch?v=DFYRQ_zQ-gk https://youtube.com/watch?v=DFYRQ_zQ-gk http://youtube.com/watch?v=DFYRQ_zQ-gk //youtube.com/watch?v=DFYRQ_zQ-gk youtube.com/watch?v=DFYRQ_zQ-gk

https://m.youtube.com/watch?v=DFYRQ_zQ-gk http://m.youtube.com/watch?v=DFYRQ_zQ-gk //m.youtube.com/watch?v=DFYRQ_zQ-gk m.youtube.com/watch?v=DFYRQ_zQ-gk

https://www.youtube.com/v/DFYRQ_zQ-gk?fs=1&hl=en_US http://www.youtube.com/v/DFYRQ_zQ-gk?fs=1&hl=en_US //www.youtube.com/v/DFYRQ_zQ-gk?fs=1&hl=en_US www.youtube.com/v/DFYRQ_zQ-gk?fs=1&hl=en_US youtube.com/v/DFYRQ_zQ-gk?fs=1&hl=en_US

https://www.youtube.com/embed/DFYRQ_zQ-gk?autoplay=1 https://www.youtube.com/embed/DFYRQ_zQ-gk http://www.youtube.com/embed/DFYRQ_zQ-gk //www.youtube.com/embed/DFYRQ_zQ-gk www.youtube.com/embed/DFYRQ_zQ-gk https://youtube.com/embed/DFYRQ_zQ-gk http://youtube.com/embed/DFYRQ_zQ-gk //youtube.com/embed/DFYRQ_zQ-gk youtube.com/embed/DFYRQ_zQ-gk

https://www.youtube-nocookie.com/embed/DFYRQ_zQ-gk?autoplay=1 https://www.youtube-nocookie.com/embed/DFYRQ_zQ-gk http://www.youtube-nocookie.com/embed/DFYRQ_zQ-gk //www.youtube-nocookie.com/embed/DFYRQ_zQ-gk www.youtube-nocookie.com/embed/DFYRQ_zQ-gk https://youtube-nocookie.com/embed/DFYRQ_zQ-gk http://youtube-nocookie.com/embed/DFYRQ_zQ-gk //youtube-nocookie.com/embed/DFYRQ_zQ-gk youtube-nocookie.com/embed/DFYRQ_zQ-gk

https://youtu.be/DFYRQ_zQ-gk?t=120 https://youtu.be/DFYRQ_zQ-gk http://youtu.be/DFYRQ_zQ-gk //youtu.be/DFYRQ_zQ-gk youtu.be/DFYRQ_zQ-gk

https://www.youtube.com/HamdiKickProduction?v=DFYRQ_zQ-gk

vimeo.com/123456789 vimeo.com/channels/mychannel/123456789 vimeo.com/groups/shortfilms/videos/123456789 player.vimeo.com/video/123456789 http://vimeo.com/123456789 https://vimeo.com/channels/mychannel/123456789 https://vimeo.com/groups/shortfilms/videos/123456789 https://www.player.vimeo.com/video/123456789

It should also handle the Youtube and Vimeo

And

PUNCH-DRUNK from Falsetooth Films on Vimeo.

The only Vimeo link it doesn't work with is the aliased links:

https://vimeo.com/falsetoothfilms/punch-drunk

Please test!!

FayCross commented 2 years ago

@JohnSmith-LT I haven't tested this yet but it's worth tagging @torinfo in this too. In last dev meeting he was talking about moving all pages that use mediaelement for video to use popcorn instead. Not sure if that will affect any of this.

JohnSmith-LT commented 2 years ago

Thanks @FayCross, Yeah I wondered whether I should have tagged @torinfo in this too...

Some of the pages already use PopCorn obviously and a few of those urls above didn't work on those pages but because the function is basically just translating to a known good url then it can probably just be incorporated into that check. It shouldn't cause any issue I don't think, I think it's more important that it doesn't mistakenly match and rewrite an uploaded video for example that has been named vimeo.com.mp4 or something bizarre like that...

Will wait for @torinfo to come back with any suggestions about this or if I can assist with the migration to Popcorn but I was thinking that should we perhaps be doing similar for audio such as SoundCloud etc which Popcorn appears to support with a plugin?

torinfo commented 2 years ago

@JohnSmith-LT @FayCross We did migrate a lot of the pages to popcorn (as I have implemented xAPI tracking in popcorn). Also, because of the plugin setup of popcorn it's easier to add services like vimeo and youtube. We've added peertube.

I'll look into the code and see where we can put them in popcorn.

The code is in the torinf fork of xertetoolkits (torinfo/xerteonlintetookits) and I need to create pull requests for a number of work we did. At the moment we're testing.

JohnSmith-LT commented 2 years ago

I need to also do some work in the editor since the Preview button for most of these URLs now doesn't work even though they play fine in the LO. Does your work @torinfo include using Popcorn for video display in the editor because it seems that the functionality you are using for xAPI tracking may also be capable of being used to finally add the sync point functionality that is missing since the flash editor - raised in this issue https://github.com/thexerteproject/xerteonlinetoolkits/issues/439

FayCross commented 2 years ago

Not sure if this is related to the work to move to using popcorn but some videos in video page which were responsive in v3.10 are now fixed size in develop. For example, 3.10 where using YouTube embed code, it is made responsive but develop same YouTube embed code on same page is showing as fixed size. Page 2 on both these projects show if you use YouTube URL instead then it's not responsive either but I'm not sure it ever has been.

JohnSmith-LT commented 2 years ago

Hi @FayCross, no this looks to be related to the URL filter that I introduced to recognise the 50+ different URL formats. The only responsive one in your example is the iFrame code but my filter strips the iframe code (and any other url) back to a standard URL format and so is being displayed by the default player for that page (MediaElement by the looks of things).

It's debatable what to do for the best here, but we have options:

  1. We could render all youtube videos as iFrame code but then we could lose the functionality for sync points and possibly xApi that @torinfo has put in place

  2. We could do extensive work to make all the different video display technologies that we currently use (iframe, ME, popcorn) all responsive

  3. We could try to get @torinfo's popcorn changes into develop ASAP but i'm not sure how ready that branch is to be merged back in - only @torinfo can make a judgement on that

  4. We rip out the code that I added, temporarily until after the release date, so that we get the minimal responsiveness back

torinfo commented 2 years ago

I'll try to push the popcorn cahnges to develop a.s.a.p.

I'll let yoiu know when done.

FayCross commented 2 years ago

@torinfo @JohnSmith-LT Is the video page now supposed to be using popcorn? I've just set up some test projects so I can test if different source formats still work but it seems to still be using mediaelement:

v3.10 test project

develop test project (created on https://xot310beta.dlearning.nl/)

You can see there are various problems with sizing of videos too in develop

FayCross commented 2 years ago

Actually, I'm confused. The first page with the MP4 is loading all the mediaelement stuff as well as popcorn - is that right? I thought popcorn was going to replace the use of mediaelement.js but maybe not?

Anyway, you can see from comparing the two projects above that there are issues with what used to work and what now works, as well as issues with sizing (and resizing) videos in develop.

torinfo commented 2 years ago

Thank you for this project. It will help me fix issues.

Popcorn itself uses mediaelemsnts if the video is an mp4. It will use the youtube and vimeo players when the video is youtube or vimeo.

The video page itself will NOT use popcorn for iFrames, but just embed the video. In that case NO tracking will take place.

FayCross commented 2 years ago

@torinfo only tested Video page but initial thoughts are it's much better in lots of ways. Bugs/comments below:

video1 The video player then loads correctly when the browser is resized (albeit at the wrong size)

Testing was done on https://xot310beta.dlearning.nl/play.php?template_id=74

FayCross commented 2 years ago

@torinfo I've just tested the optional properties on Video page associated with video sizing. A few more comments:

The other optional properties (iframe aspect ratio & iframe max size) still work as expected in all the examples I've tried

FayCross commented 1 year ago

Closing this and have moved outstanding bugs to https://github.com/thexerteproject/xerteonlinetoolkits/issues/1210 as this issue mainly deals with something else.

@ingedonke @JMarco27 this issue was about what can be used as the src on various pages that use video. It feels like something that would be good to include in documentation somewhere.