I'm looking for a web video player (html, js, php..) that looks like a Picture-in-Picture but working as a standard player.
I would like something which:
can play as PiP but without becoming dark on mouse-over ("back to the tab)
can have layer controls (play/stop..)
can be resized more than 50% of screen (unlike PiP) (*)
I need it to be added in a gis-web-server I made, able to be played over a map, to let user observe both map and video at the same time.
(*) Note: I take advantage to ask here if someone can help me (in absence of a solution) to be able to increase more than 50% the size of PiP in a standard html video player (HTML '<'video'>').
Related
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.
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'm working with a Flash website at the moment, and when clicking on a specific hotspot, it opens up a new .swf over the top. This .swf it opens is styled similar to a Lightbox. It has a (x) to close unLoad the movie, along with a (<) and a (>) to navigate through the images.
The problem being, when adjusting the explorer window, the flash elements scale to the adjusted size, staying in proportion.
What I want is, while it's in the HTML page, is to have only the background flash image to scale, but to have the overlaying 'lightbox' .swf at a fixed width/height, so it never scales according to the size of the user's window.
I've found an example to help with this:
http://newsletters.plainpicture.com/static/newsletters/com/news-1208/index.html
how is your "lightbox" swf implemented? is it an actual html lightbox that acts as a container for an external swf movie? or it's your coded lightbox inside the same swf website movie?
if it is html lightbox then you must provide information about what kind of lightbox it is and perhaps look into the lightbox documentation.
if it's your "lightbox" inside the same flash movie, a possible way to resize a specific part of the same swf but not another is to publish the movie (inside "publish settings", ctrl+12) as non-scalable, and resize only a desired part of your movie manually- via the resize event on the stage listener
var stageListener:Object = new Object ();
Stage.addListener (stageListener);
orig_ratio=Stage.width/Stage.height;
stageListener.onResize = function(){//resized page
something_to_resize_only._height=Stage.height;
something_to_resize_only._width=something_to_resize_only._height*ratio;
//...etc etc... you may include current_ratio/orig_ratio comparison conditions too
}
if you need help with resizing stuff manually, you should create a new question as it is something irrelevant to this question. don't be afraid though, it's not a difficult task and you may even find a lot of tutorials on proportional scaling/resize
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 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.