Looking at this handy page:
HTML5 Video Events and API
has been extremely useful. However, there's one attribute of an HTML5 video that I want to be able to get or set programmatically, and it's not listed there. So I'm wondering, is it possible?
I want to be able to detect whether the 'full screen' button has been clicked by the user, and potentially I want my code to switch the video into or out of full screen mode automatically.
Can it be done? And if so, how do you do it?
I'm using IE harnessed within a Visual Studio WebBrowser element, if that makes a difference.
You can make the video fullscreen using Full screen api.
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
Check this answer:
https://stackoverflow.com/a/6039930/3898364
Related
I want to embed a video in a simple, largely JavaScript-free web page. But I have two versions, one at 1920x1080 and one at 960x540. Ideally, the latter should be used in a smaller embedded window to save the user download, but the former if they go full screen on a PC.
I was expecting to see something on the <Source> element, but could not find it. I would think that it is a very common requirement.
Is there a fairly easy way to do this? Or do we just make the user always use the big file?
(One option is to put the small one inline, and then put a direct link to the full video after it, if the user clicks the latter they get the full resolution.)
The video contains a lot of text, so the larger one does look better full screen. It is twice as large though. (Handbrake compressed at 30 quality.)
If there was some widely used JavaScript control that would be good. But I do not want to have a dependency on a large framework such as React or Angular. This is essentially a static web page.
There are no media queries available for the video tag. You're stuck with JS or HLS streaming to create responsive video on the web.
Here's a simple JS example that will do what you are looking for.
<div id="video"> </div>
<script>
//get screen width and pixel ratio
var width = screen.width;
var smallVideo= <smallvideo>;
var bigVideo = <bigVideo>;
if (width<500){
console.log("this is a very small screen, no video will be requested");
}
else if (width< 1400){
console.log("let’s call this mobile sized");
var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +smallVideo +"\"/\>";
document.getElementById('video').innerHTML = videoTag;
}
else{
var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +bigVideo +"\"/\>";
document.getElementById('video').innerHTML = videoTag;
}
</script>
What is the "Source" you expect?
I'm not sure but maybe you can handle it by javascript.
In html, just show that former video, then when user interact with this, you can redircet to latter video.
I think I need a script that will "get" all the playing HTML5 audio controls and "pause" them apart from the one the user clicks play on. I have seen and can handle simple play, pause, stop with just one audio controls but my skills fall way short of coding something to do what I'm after with multiples. audio controls is a neat solution and integrates well with my current design, I just need help making it work properly. The use case:
https://aberaeronskies.com/ page loads and nothing plays which is desired, user clicks play on a audio controls tag and the track snippet plays which is desired. User clicks on another one (there are 14) and it starts to play, trouble is, the first one is still playing which is not desired; one could click on all of them and they would all play!
The requirement is for a script or a call or whatever (I'm no coder, just doing this as freebie for a mate) that when a user clicks play on any one of the 14 tracks it pauses all other playing tracks.
I thought this was it: Pause all other players besides activated one. jQuery audio plugin for <audio> element and Play selected audio while pausing/resetting others but I'cant make them work.
It may be that this cannot be done and I need to rethink the whole presentation of multiple tracks and if so, further advice on where to look (in addition to above) would also be useful.
Thanks very much...
Ah...
This works
var curPlaying;
window.addEventListener("play", function(evt)
{
if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
{
window.$_currentlyPlaying.pause();
}
window.$_currentlyPlaying = evt.target;
}, true);
$(function () {
$(".playback").click(function (e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (song.paused) {
if (curPlaying) {
$("audio", "#" + curPlaying)[0].pause();
}
song.play();
curPlaying = $(this).parent()[0].id;
} else {
song.pause();
curPlaying = null;
}
});
});
How can I enable getUserMedia/HTML5 Webcam access calls on Raspbian(chromium) to the camera? I only found answers to stream pictures to HTML5 sites, but I actually need this on device. I already have the code running to get the Pictures with JS. Moreover, raspivid is showing me correct pictures. So how do I make Chromium to notice the camera?
Thank you!
If you just want to stream video from the camera into a web page then this is straightforward.
You need to use Firefox or Chrome as the browser (and Opera??), create element in your web page and then include JS code similar to this:
navigator.getUserMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var url = window.URL || window.webkitURL;
video.src = url ? url.createObjectURL(stream) : stream;
}
mediaStream = stream;
video.play();
},
function(error) {
console.log("ERROR: " + error);
}
);
There are details to deal with such as resizing the output window to match the input stream.
Take a look at my Tutorial on this which includes a simple working demo and complete code - as well as static image capture from the video feed.
You can use a bit of a JavaScript workaround, as the actual methods for recording directly from the browser using getusermedia aren't implemented yet. Whammy.js is a good place to start (https://github.com/antimatter15/whammy) and there's a good guide here: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ (Too much code for me to put here!)
Not sure if that's what you're asking, but it's there should you need it.
I am wondering how I make get an audio file to play 'continuously' on all pages. So if the audio file has played for 20 seconds, then when navigating on another page it will continue from where it left off. I also am trying to get the volume to decrease after navigating away from my home page. Any tips or advice would me appreciated! Thanks =D
<audio src="songforsite.mp3" loop="true" autoplay="true" controls>
Unsupported in Firefox
</audio>
Yes, it is possible. try this:
<audio preload="auto" src="a.mp3" loop="true" autobuffer>
Unsupported in Firefox
</audio>
<script>
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
var song = document.getElementsByTagName('audio')[0];
var played = false;
var tillPlayed = getCookie('timePlayed');
function update()
{
if(!played){
if(tillPlayed){
song.currentTime = tillPlayed;
song.play();
played = true;
}
else {
song.play();
played = true;
}
}
else {
setCookie('timePlayed', song.currentTime);
}
}
setInterval(update,1000);
</script>
If you really navigate to another page, then you will not get really continuous playback.
There are three common approaches:
open your audio player in a popup
frames: one main frame for your page to display in, a small frame for the audio player
not really navigating to other pages, but do everything with AJAX and thereby not actually reloading the page, but only changing parts of the document structure dynamically; maybe adding real link functionality including changing the address bar by using the HTML5 History API
All approaches have their pros/cons. Popup is maybe the easiest to implement, and has the least drawbacks (compared to frames).
I also am trying to get the volume to decrease after navigating away from my home page.
Then catch any clicks on your “home” link/button, and call the volume method of the audio element with a parameter value ranging from 0 to 1 to set the volume.
well .. a clean and neat way to do it , is the way that soundcloud.com and spoify.com made through ajaxifing all the pages
fix a page and change the pages content through ajax ,and change the url as well to give the user the illusion of navigating
this is not the easiest or fastest solution ,but it's the cleanest one ..far away from the fear of browsers incompatibilities
I need to play and pause the video player if any part of the video is clicked, so I implemented something like:
$("#promoPlayer").click(function() {
$("#promoPlayer").click(function() {
if(this.paused){
this.play();
} else {
this.pause();
}
});
...but now the controls of the video won't pause/play.
You can see it in action here(http://175.107.134.113:8080/). The video is the second slide on the main carousel at the top.
I suspect I'm now getting 2 onclick events one from my code above and a second on the actual pause/play button.
I don't understand how the actual video controls work, because when I inspect the element, I just see a tag. If I could differentiate the controls, then perhaps I might have figured out a solution by now.
Anyone know how I should have done this, or is my solution ok. If my solutions ok, how do I intercept a click on the control, so that I only have one click event to pause / play?
If you look on the media element home page, they have a big play button, complete with mouseOver, but I can't see how they have done that? Can someone else help?
The controls of the browser's native player are not individual DOM elements so I don't believe there's a way to identify them.
My suggestion would be to create an invisible div which covers the player but not the controls, and bind your logic to that.
Ok, I was being an idiot. I hadn't initialised the MediaElement player:
$(document).ready(function(){
$("#promoPlayer").mediaelementplayer({
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false
});
});
Which mean't that what I thought was MediaElement, was actually just my browser's native support for the tag...
As expected MediaElement does of course give you such things as being able to click the whole video frame and have the video start for free...
The player should already play/pause on click, but if you want to attach events it's best to do so within the success handler:
$(document).ready(function(){
$("#promoPlayer").mediaelementplayer({
success: function(media, domElement, player) {
$('#somebutton').on('click', function() {
media.play();
});
}
});
});