VideoJS Playlist UI on Fullscreen - html5-video

Is it possible for VideoJS to show/hide the playlist when in fullscreen? I've looked for examples online including even with the VideoJS based Brightcove's player and not found any so far. An example of the Playlist UI is: https://videojs.com/advanced/
I am looking to migrate from the MediaElementJS player which does support toggling the playlist from fullscreen, to VideoJS if i can get its playlist behaving in a similar manner. Exiting fullscreen to use the playlist is not acceptable.
If this functionality isn't currently supported, does anyone know any way around this issue? Perhaps an iframe based solution to keep the player fullscreen while accessing the playlist?
I'm not a web dev so please provide detailed info and/or full code examples rather than snippets. I'm getting there gradually.
Thanks!

Related

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.

how to control an embedded <iframe> (any) video?

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 ;)

Playing youtube/vevo videos on iOS

I've seen the Google blog article explaining the way to embed youtube videos in an iOS app. I've successfully embed videos in my iOS app. BUT, I've seen the WhoSampled app where they are able to play Vevo/youtube videos. Somehow they are able to play those videos and my app is not able to play them. (In my app, there is a blue play circle with a line through it showing that is not playable.)
How do I allow those videos to be playable?
Do I have to setup the youtube link in a specific way or is there a way I need to setup the developer key?
There is a way to get the actual video stream for a given YouTube video instead of the HTML-embedded one. See this project:
https://github.com/hellozimi/HCYoutubeParser
The problem with this approach is that it will likely violate the EULA of YouTube APIs, especially if you are releasing it in a paid application:
In addition, please remember that attempting to play a YouTube video outside of either the YouTube embedded, custom or chromeless player is strictly prohibited by the API Terms of Service.
(source: https://developers.google.com/youtube/creating_monetizable_applications)
You just have to use the iframe embed as opposed to the Flash one.

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.

Play brightcove videos

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