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.
Related
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.
I would like to be in full control over Embedded videos, just as like as i can control my owned videos.
By "control" i mean by commands, such as -
iframeId.play();
iframeId.pause();
iframeId.currentTime();
I've seen its possible with YouTube videos, they share they're API.
But is it possible with any flash video i embed?
can i find it's API somehow?
if i cannot, can i work on any other solution (to control embedded vids) in any other way? how?
You should use YouTube IFrame API to control YouTube videos which are Iframe, AS3 or AS2.
Here is the full reference page for it: https://developers.google.com/youtube/iframe_api_reference
Also you can use Javascript API or Flash (Raw) API
Don't forget to use the YouTube player by the rules (I mean, you shouldn't hide the player or sth like that.)
Good Luck ;)
Is it possible to capture a snapshot of a video that's loaded using the HTML5 video element and use that as a preview image until the video loads or the play event is triggered? I know about the poster attribute but I want the thumbnail to be self generated, like a random frame from the video. Sort of what YouTube/Vimeo does.
Thanks,
I don't think that this is possible in pure HTML5. Principally because the stream is not loaded when you see the 'object' in the webpage so the client can't get the desired frame.
However, the best option for you is to save / cache the 'random frame' before loading the page and then use it as the poster of the video. This will allow you to reduce the client work and save the bandwith.
check THIS, which is the first thing that I've found (if you're using PHP and you want a 'quick and dirty' way to get the frame)
Update
Apparently HERE there is a solution with popcorn.js BUT it seems that you can't do it in the way that (I suppose) you need.
This because it would be possible to do this only inside the same domain due to browser security issues.
I want to play a remote video hosted in Brightcove. As Brightcove URLs are links to players not direct links to video files the AVPlayer won't do it.
I know Brightcove provides an API but can't find any good examples for iOS nor documentation.
Any help/pointing direction appreciated.
I haven't used Brightcove, but poking around their site, I see they have two APIs: a Player API and a Media API. It sounds like the Media API is what you want — it's documented as giving direct references to the videos. The page has a link to several examples.
You can also lift alot of the code from their Oneplanet demo source. In fact the whole playlist and video player mechanism can be practically copied into your project so all you need to do is pass a video or playlist ID into their initwithnibandplaylist function in their view controller and you're good to go.
I hope this helps your question. There is a renditions which contain direct video link.
Here is a link for api link.
http://support.brightcove.com/en/video-cloud/docs/accessing-video-content-media-api
renditions is a javascript object containing multiple video links based on resolutions such as 360,460, 720.
You can find the direct link to the video via the media api, bypassing the player API entirely. You need a pro account and a token:
http://support.brightcove.com/en/docs/getting-started-media-api
Alternatively, you can create a simple "player" without any controls (just a video window actually) and make your own HTML controls totally outside of Brightcove to trigger almost anything you'd want to do via the player API.
There is also a Brightcove iOS SDK. It is really two SDKs one for the Media API and one that includes a MediaPlayer. If you want to use the AVPlayer you can use the Media API iOS SDK. Here is the docs for that:
http://docs.brightcove.com/en/video-cloud/mobile-sdks/brightcove-player-sdk-for-ios
The problem is, my videos are hosted on a video site, longer videos will be divided into several parts. I want to play these clips in html5 video tag on my own site, is it possible to play media resources listed in source tags sequentially?
I googled and got to the w3c's html5 video spec page, find an attribute named startOffsetTime, I tried to assign value for this attribute to each media resource as suggested in the spec, but it still doesn't work.
You can load the next clip when JavaScript's onend event is triggered.
Check out markcial's answer in another thread.