A while ago I stumbled across an example of an HTML5 video player with support video in video. In an example use case, the following was demonstrated: a powerpoint presentation video, with an explainer video to accompany it. Unfortunately I can't remember which video player it was.
To illustrate; something like this
The beauty of the player is that it's able to serve multiple sources of video in one view and toggle between different view points (like split screen and switched view).
Like I have illustrated here:
Split screen video
Switched video view
Could anyone help me find out which HTML5 video player it may have been, or maybe how this could be achieved in something like VideoJS?
It looks from your requirements that these are completely separate videos.
If this is the case then one simple approach is to just have two video players.
You can then use your web page layout to place them wherever you need them to start up, and add some simple Javascript scripts, linked to buttons on the page for example, to change the layout to however you want it for that particular button (e.g. one button might be for split screen).
Related
Currently, I've observed that the audio player added via HTML tag looks different in appearance in Chrome and Firefox.
Is there any standard we can follow to make its appearance same across browsers or implement custom player in an easy way to achieve the purpose?
Yes, we can have customised audio player which can look same across all the browsers. But the thing is we need to do styling and develope functionality of that audio player like
a play/pause button
a seek slider
the current time indicator
the duration of the sound file
a way to mute the audio
a volume control slider.
May be the following article will help you
https://css-tricks.com/lets-create-a-custom-audio-player/
Yea You can have it.
You Just Need to write the Appearance .css for all platform Respectively And Explicitly
I have multiple HTML5 videos on a webpage I am creating. They autoplay and loop like gifs.
However, the page barely loads with the 6 or so 15 sec videos. Is there a way to optimize these videos so that the page loads them and itself faster?
EDIT:
Most Buzzfeed pages have dozens of video "gifs" on one page and they load fine. I'm wondering how I can do this? Currently the browser becomes overloaded.
Most devices have optimised hardware and software to play videos, to reduce CPU and preserve battery life for example.
Once you ask the device to play multiple videos at the same time you start to overload any optimal paths and playback may fall back to software to do all the heavy lifting.
One way round this, if your particular application will work with the approach, is to combine the videos on the server side into a single video.
You can still make this look like separate videos, by hiding the main controls and adding overlays with individual buttons over the relevant area.
If this does not work for you, then making the videos as low bandwidth and as short as possible will help. If you can avoid autoplaying this will obviously make a big difference also.
As a note, Buzzfeed does have multiple videos on a page but they do not auto play when I look at their pages, which means all they have to download and display is the thumbnail (maybe we are looking at different pages - if you have an example page that autoplays multiple videos, can you give a link?_.
I have video that will be divided into 4 videos.
First the player will stream a lower resolution of the original video, then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.
How can I make that using VideoJS or any other video player ?
After searching, this is the answer ...
For zooming into the video, you can follow this tutorial: Zooming and rotating for video in HTML5 and CSS3
For switch streaming of videos in the same player, you can make that by changing the source on html5 video tag and make some calculations to know where the user zoomed in and hence change the source video.
As there is no response yet let me analyse the problem. This is by no means meant as a full answer, but other people will probably be able to answer parts of the problem:
First the player will stream a lower resolution of the original video,
This means you will need to create/use a video stream. There are plenty of plugins you can use for videostreaming, and depends on what you want. You can consider writing it yourself using for example C#'s System.IO objects and transforming the video in bytes(And putting it back together) The resolution would be easiest reached by just having a seperate video file for this step of the proces. (a lower resolution one used for streaming only)
then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.
So you need to trigger a zoom effect. This means you would need to detect zoom. This would be possible with Javascript in a webbrowser, if you want a browser based application. When that zoom is triggered you can retrieve what position the mouse is on the screen/in the div or on some sort of overlay. Depending on this position you could show another stream.
How can I make that using VideoJS or any other video player ?
Basically these steps above is how i would start looking into this specific case. Considering your VideoJS as a suggestion i assume this is browser based. This would probably mean using Javascript libraries, maybe combined with a server side language.
Thats as far as i can go. Maybe someone can pick up specific parts of the thing i wrote and help you a step further.
Have a nice day!
I'm building an EPUB3 ibook and want to incorporate audio.
I'm succeeding, in so far as that I have a screen on my iPad2 with a button to play the audio file.
But that button is ugly and way too big. I suppose it's some default button of Apple.
How can I influence the way the button looks?
The XHTML tag I use now is like this:
<audio controls="controls" src="dir1/sound.wav">sound.wav not present</audio>
That's all I do now. Nothing epub:type for this whatsoever.
Good question. Apple has royally failed on the audio player in this last iOS update... But the good thing is: you can build your own using Javascript!
You can find most of the main functions here: http://www.w3schools.com/tags/ref_av_dom.asp.
As long as the audio container is in the same chapter, you should be able to control it with the functions above (just hide it and don't show controls). Then you can use custom CSS to build your player from scratch (cool example here: http://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player--webdesign-7081)!
You should also use .mp3 format for best file sizes and results...
Good luck!
I need some advice on how to play video on a website. What I would like is to have a clip link on the page, and upon being clicked, a video player expands to the middle of the screen and plays the video (and has the standard video player controls). It also has "X" to close the video. I would suppose there is a widget or tool for this but I can't seem to find it.
Also what video resolution and format would be best (most compatible with browsers)? The video would just be a local file on the server.
Try look here:
http://rainbow.arch.scriptmania.com/scripts/music/video.html
http://www.w3schools.com/html/html_videos.asp
http://www.sothinkmedia.com/guide/makebutton.htm
Hope this helps.