Page MenuHomePhabricator

Support 360 videos
Open, LowPublicFeature

Description

Provide support for 360 VR videos.
https://docs.brightcove.com/en/video-cloud/brightcove-player/guides/360-plugin.html

One thing to note here, is that it seems there are no standardized methods in html5 yet to indicate 360'ishness of videos. So we will require data attribute annotations or something.

A secondary challenge is that you need really high resolution video for this to be somewhat useful, and our pipelines are still somewhat flacky on that front.

Related: T151749: 360 Photo support

Event Timeline

TheDJ added a subscriber: brion.

If you need files for testing, there are some in Category:360 panoramics videos.

This comment was removed by Eatcha.

While VideoJS doesn't have native support for spherical video, there is a plugin that adds support: https://github.com/videojs/videojs-vr. The examples at https://videojs-vr.netlify.app/ work well, it has an active maintainer, and it's what Brightcove's current player uses.

This doesn't solve the problem of getting projection metadata from the source media to the player though.

TheDJ triaged this task as Low priority.Jan 17 2022, 2:04 PM
TheDJ changed the subtype of this task from "Task" to "Feature Request".

Also @zhuyifei1999 experimented with this for @Eatcha: https://yifeibot.toolforge.org/videojs-vr/examples/eac.html

I've gone through a couple of the videos and i really see 0 indication of any annotations so we'll really need to provide our own I guess. i also doubt this will work icw with ogvjs, but thats something we can live with i think.

What does need to happen is that this metadata does not only have to be added, we also need to pass it into every thumbnail as metadata, so that the player can dynamically lazyload the appropriate module.

Change 787066 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/TimedMediaHandler@master] [WIP] 360 video support

https://gerrit.wikimedia.org/r/787066

Ideally we'd use CommonsData to add a projection property to a file page, with the projection values.
Then when a page has these properties, we read them during the thumbnail stage (means we have to find the revision content of the page instead of the file)
We encode the values in an HTML attribute:

<video id="mwe_player_0" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/360_Video_of_LCS-15_Christening_and_Launch.webm/1024px--360_Video_of_LCS-15_Christening_and_Launch.webm.jpg?20190710204436" controls="" preload="none" width="1024" height="512" data-durationhint="71" data-mwtitle="360_Video_of_LCS-15_Christening_and_Launch.webm" data-mwprovider="local" data-mwprojection="EAC">
    <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/1/1e/360_Video_of_LCS-15_Christening_and_Launch.webm/360_Video_of_LCS-15_Christening_and_Launch.webm.480p.vp9.webm" type="video/webm; codecs=&quot;vp9, opus&quot;" data-title="SD VP9 (480P)" data-shorttitle="VP9 480P" data-transcodekey="480p.vp9.webm" data-width="854" data-height="428" data-bandwidth="461672" data-framerate="23.976"/>
    </source>
</video>

The projection info has to be forwarded to the InlinePlayer loader, which will conditionally load the VR plugin and after videojs setup will trigger the vr plugin with the correct projection.

Unfortunately, once more, the terminology for projections seem kinda all over the place. Which is going to make it a bit difficult to create the projection items in Wikidata perhaps :(