HTML5 video toggle audio tracks - html5-video

Given a video file with multiple audio tracks, I'm looking for a way to toggle the played audio stream during playback to save space and add multiple different translations to the same video file. I read about the video.audioTracks property, however, according to this page it's only available in IE11+ and Safari browsers as of now. From what I've of about so far it might be possible to store the video without any audio tracks whatsoever and play the audiotracks separately (which would most likely lead to asynchronous playback). Are there any better ways of achieving this behaviour?

Related

HLS Player: Clear video.js buffer on click

I have two live videos feeding an encoder which creates H.264 chunk files and an HLS manifest which is being served by an apache web server.
A browser page using video.js shows a player. Pressing "play" on the browser properly plays the video. It works well.
However, if we change video sources (by flipping the switch in the picture below), there is a considerable delay (10 seconds) before the new content is displayed in the player. I'd like to get that to 3 seconds.
It appears that video.js and/or the HTML5 player in browser is buffering that amount of content. (if you delete the files on the web server, kill apache, or even pull the ethernet cable, the video keeps on playing!)
A button on the web page controls the switch. When clicked, I would also like to clear or reset the player so that it immediately re-reads the index.m3u8 manifest and downloads the new chunks.
So far, haven't found anything promising searching the internet or in the video.js API docs. There are lots of articles on API calls for fetching the current buffer percentage but cannot find any API for clearing it altogether.
Any ideas?
The encoder is set for 3 second chunks and the playlist depth is set for 10 entries.
I had a similar problem. Since i could not find a reliable API for this, i came up with a rather dirty workaround to clear the buffer:
var ctime = player.currentTime();
player.currentTime(0);
player.currentTime(ctime);
This currently works for me in all major browsers.

Selecting high bit rate video from master playlist .m3u8 to play video using AVPlayer

I have mater playlist .m3u8 that files contain's other index file of type .m3u8 now app requirement's is to play video of high bit rate video, is it possible to achieve this and play high bit rate video using AVPlayer(apple tvOS).
Master playlist contains following index files
EXTM3U
EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=378000,RESOLUTION=256x144,CODECS="avc1.42001e,mp4a.40.2"
someurl.m3u8
EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2072000,RESOLUTION=480x270,CODECS="avc1.42001e,mp4a.40.2"
someurl.m3u8
EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2671000,RESOLUTION=640x360,CODECS="avc1.4d001f,mp4a.40.2"
someurl.m3u8
Now according to requirement app needs to play below url from master play list.
ID=1,BANDWIDTH=2671000,RESOLUTION=640x360,CODECS="avc1.4d001f,mp4a.40.2"
someurl.m3u8
Is it possible to achieve this using AVPlayer.
Setting
player.currentItem?.preferredPeakBitRate = 2072000
only sets an upper bound on bitrate, so for example you could exclude the highest bitrate using this.
The thing is, AVFoundation will not choose a bitrate that is higher than the network connection's throughput, because that would result in choppy playback, which is not a sensible strategy.
That said, if you really want to force playback of the highest bitrate asset, you could intercept the fetching of the outer m3u8 file and suppress the lower bitrate entries, or parse the file and play the highest bitrate URL directly with AVPlayer.

using VideoJS VAST plugin without video content

I want to display ads with VAST ad tag and with a HTML5 player. I'm currently trying to use videoJS with Vast Ads Plugin and I'm noticing I can't get the videoJS player to work without having a video content (video element with a src attribute for the video content).
Does anyone know a simple way to use a video player for just ads from VAST, and without video content? Google IMA3 SDK allows that, but I'm now looking for video plugins to cover IE use case (which Google IMA3 SDK does not cover).
Thank you!
There is a dirty way to do this. You can get the ad video url from the plugin that already parsed by it. Then just paste as src to video tag.
If the player you are using support only running pre-roll, that's obviously the best choice. Since that's likely not the case, I would recommend creating a small 1 second long black video MP4 and setting it as the content, with all video controls disabled. This was the lowest friction solution for me, as I didn't need to ask the player anything special of the player. The pre-roll plays, and the user briefly sees black at the end, which may not really be noticed.

Can HTML5 track element be used for *live* subtitles?

I am planning to build a system to broadcast public events (trials, meetings, conferences).
A key request will be the insertion of live subtitles to the A/V stream.
The subtitles will be "live" since they will be produced by an operator while the event will happen.
I suppose the HTML5 "track" element is not yet implemented by any of the major browsers, but: can I expect to eventually use it for live subtitles? Will I be able to inject the subtitle to the page while the stream is playing?
Please Look at the following links. Looking at the link i am having to believe it should be possible as they are using Js to show subtitles
http://www.storiesinflight.com/js_videosub/
http://cuepoint.org/
You may also consider http://mozillapopcorn.org/ which is to show content on timing of the video. So technically u can use this with ajax to show/stream subtitles
There are HTML5 video JS libs that support subtitles (eg: VideoJS supports the .srt format, there are several easily Google-able others), however to the best of my knowledge none of them support streaming subtitles.
I think you may have to build your own solution for this. If I were to do it, I'd probably try doing something with Socket.IO's broadcast functionality that can push data out to all connected clients at once, and have your client-side JS listen for new subtitle events and render them on screen as they come in. You can use plain ol' CSS to overlay the text over the HTML5 video.

MPMoviePlayerController mp4 file streaming

I have few links to .mp4 video files like
file1.mp4
file2.mp4
file3.mp4
I need to play them all in player as one file. Actually not necessarily "as one" file, the player must act like it's one file. My best guess is to create custom controls and playback area for MPMoviePlayerController and divide the playback by time slices.
For instance
file1.mp4 file2.mp4 file3.mp4
-----------|------------|------------
Is this a good approach? Can this be done anyhow easier?
Also, the server, from which I'll get the videos is not customizable and I can't convert videos to MPEG-2 and stream them via .m3u8 files.
Thanks in advance
I guess you can use AVQueuePlayer. It supports multi-item playback. Haven't tried that myself (I used AVPlayer for single-item playback). I believe that AVQueuePlayer usage should reduce your overall efforts. ( You will still be responsible for drawing playback controls )
I sticked up to the scenario I described in the question and was able to create the player component.