search

BrownCLPS / LingView

A web interface for viewing ELAN and FLEx files:
https://brownclps.github.io/LingView
MIT License
19 stars 19 forks source link

allow YouTube-hosted videos #45

Closed sciepsilon closed 3 years ago

sciepsilon commented 4 years ago

YouTube hosts large videos for free, so I want people to be able to use it with LingView for their >1MB videos.

We need a way for the user to tell LingView their video's URL. Maybe instead of putting an .mp4 file in data/media_files/, they can put a .youtube file in there, whose title matches the FLEx or ELAN file and whose content is just a YouTube link. LingView should look for .youtube files at the same time it searches for other media.

Then we need to display YouTube videos correctly on the site. We need to use an <iframe> element, not a <video> element, otherwise YouTube acts as thought that video doesn't exist. We'll also need to make some cosmetic changes so that, e.g., the left sidebar and the YouTube video are similar widths.

sciepsilon commented 4 years ago

I initially estimated this would take a few hours to a week. One week later, I'm less than halfway done...

sciepsilon commented 4 years ago

For future me, or whoever picks up this issue: Here are some relevant links. My work is on the youtube branch.

https://stackoverflow.com/questions/9914373/ontimeupdate-with-youtube-api https://stackoverflow.com/questions/42754097/youtube-api-event-on-timeupdate https://github.com/ginpei/html5-youtube.js/ https://stackoverflow.com/questions/10175367/youtube-api-event-on-a-specified-time/11782167 https://github.com/mozilla/popcorn-js/

hollyyuqizheng commented 3 years ago

I plan to work on this project for a bit. My work is in the youtube-v2 branch. I anticipate that I will mostly work on creating the mechanism to read video URLs in .youtube files and display the video at that URL on a story's page, as well as potential syncing between the Youtube video and the texts.

hollyyuqizheng commented 3 years ago

Progress update: I managed to create the feature where the user needs to provide a .youtube file in media_files, and this .youtube file should contain an URL to a Youtube video. The "video" tag for this story in index.json will become the Youtube URL after rebuilding, and the Youtube video will be displayed on this story's page on LingView.

The loading of Youtube video, however, has been flaky... This might relate to some bugs on using the Youtube player API.

I still need to figure out how to sync Youtube videos with the scrolling text on each story's page.

hollyyuqizheng commented 3 years ago

Progress update: I think what's in the youtube-v2 branch now works -- syncing is enabled now between the Youtube video and the text, so each text will be highlighted purple when its timestamp is reached. Clicking on a sentence's timestamp also moves the video to that spot.

There are some strange behaviors I'm trying to solve... Sometimes the Youtube video frame can't load, and I need to refresh the page for it to show up. Also, changing the URL to a specific sentence's timestamp does not enable highlighting or scrolling into that sentence at the moment.

hollyyuqizheng commented 3 years ago

77