Comments (7)
@jwold A couple of updates here and answers to your questions:
- I researched the way subtitles are represented in DASH manifests.
- Also researched if there is a way for us to generate DASH manifests with subtitles in it using
ffmpeg
. - Then tested if using a
<track>
element on the<video>
element works for streamed videos.
Turns out ffmpeg
's dash
muxer is unable to create entries for subtitles. I actually had to check ffmpeg
source code to figure that out – turns out the generated AdapatationSet
can either be of type video
or audio
. No subtitles support built in.
That means we would need to use more advanced tools to generate DASH videos – perhaps Shaka Packager. Right now, however, we are keeping it simple and we don't use these advanced tools.
Also, because we're in full control of creating the streams and initializing the player on the page, we can simply add the subtitles as a <track>
element to the <video>
player that plays the stream. Subtitles added using this way work perfectly, which then checks the last item in the proposed ACs.
Because of the above, I'm now moving the ticket to QA.
Answers to your questions:
- Not sure what you're asking.
😄 - I just downloaded the subtitles from YouTube and uploaded them to our media server.
- Correct.
To clarify: when we talk about streaming videos, we really talk about adaptive streaming of a video on demand. The experience is basically the same as with a static video – only with the added ability to switch between bitrates based on network conditions etc. We do not talk about live streaming.
from kino.
@jwold This is already possible in the POC and should be in Phase: 1
and expanded on a bit more. Default behaviour of the html5
video
object comes with support for this out of the box. We could also expand this ticket for Shaka player and others though, or create a new one for them.
from kino.
If we implement Shaka, we need to make sure you can select subtitles and languages.
from kino.
@jwold This is missing ACs. I suggest something along the lines of:
- It is possible to enable and disable subtitles in a video player.
- It is possible to choose subtitles language in a video player.
- Subtitles work for static and streaming videos.
(BTW, those are all satisfied but a support for "streaming videos" – I'll need to implement that.)
I'd then suggest we create a separate ticket for Shaka (or other players) work, because right now the application is all built on top of a regular <video>
element and the associated browser APIs.
from kino.
- So right now we have the
video
player, which subtitle creation out of the box, except for streaming videos. Correct? - Where do you pull the data for subtitle with streaming videos? Are those auto-generated, or is there a place for people to manually add subtitles as the stream is going?
- Beyond that we need to add ability in Shaka player to enable and disable subtitles, choose subtitle languages, and make sure subtitles work for streaming. Correct?
from kino.
- Whoops, I had put in angle brackets, which hid part of the message. Here was my questions: So right now we have the video player, which subtitle creation out of the box, except for streaming videos. Correct?
from kino.
Verified this on KINO Staging Site via Google Chrome
Given the end user is viewing the static embedded video content within the video player
When she clicks the Closed Caption icon built into the video player
Then she is able to turn on/off, select language for the subtitles
And after selecting the appropriate language
Then the subtitles are displayed within the video
Screenshots:
Points to note:
This ticket is verified in QA for phase 1 of the application.
from kino.
Related Issues (20)
- Offline to Online: Partially downloaded file is paused when SW goes offline, but UI indicates download is continuing
- Video greyed out and cannot click "remove offline version" after hard reload (Ctrl-Shift-R) in offline mode HOT 2
- IndexDB not being freed up when removing offline video from within webapp HOT 3
- The app needs to handle 404s correctly
- Improve Lighthouse scores HOT 10
- Add code highlighting
- Create a guide for contributors
- Fix CORS issues HOT 5
- Improve firebase init command in README.md file HOT 5
- Display video artwork in the Media Session API
- Add linter for the Markdown with frontmatter support
- Autoplay research and implementation
- Could not append initialization segment to source buffer HOT 7
- Button "Resume download" is not displayed when internet connection is cut while downloading a video HOT 1
- Multiple videos can be played at the same time when they're being played in PiP mode HOT 1
- Hide "Cast" button when there are no devices to cast HOT 1
- Continue download and cancel download buttons become irresponsive
- Stop first video when second video starts playing HOT 2
- Hard refresh required to get new content.
- HTML Samples are encoded when they shouldn't be
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kino.