I have implemented hacktimer HackTimer project and i got nice game working even in inactive tab (background). I have part with video and video also works fine - after activate tab in chrome they speed up for secound to get perfect currentDuration. Now same code not working any more. Video go to pause regime in the moment of inactivity. When i go back to tab video start to play.
I have no idea what can be.
My OS: windows Chrome version: Version 80.0.3987.149 (Official
Build) (64-bit)
My html tag looks like:
<video id="videoID" muted playsinline
oncanplaythrough="console.log('video ready');">
<source src="1.ogv" type="video/ogg">
<source src="1.mp4" type="video/mp4">
no support
</video>
I just wanna permament playing like youtube did.
Only solution for last version was : Visibility api .
hackTimer works fine all the time but inactivating tab makes pause() call.
I just put on visibilityChange event code line video.play() .
Code:
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
var videoElement = document.getElementById("videoElement");
function handleVisibilityChange() {
if (document[hidden] && videoElement.style.display != 'none') {
videoElement.play();
}
}
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
For my app if video is visible then play but other people can add also this line :
if (video.paused) {
video.play()
}
Related
I have a element where I would like to toggle the default controls when clicking the element, but when the controls are shown using these controls shouldn't toggle control visibility.
I'm adding the handler as bubbling, hoping that the built-in controls would preventDefault such that my handler was never invoked but the event caller is always called at least on Safari.
var video = document.getElementById("video");
video.addEventListener('click', function(evt) {
video.controls = !video.controls
});
Is there some other way to add the event handler or perhaps properties on the event I can use to differentiate clicks on the video controls vs. clicks other places in the video element?
"Is there some other way to add the event handler or perhaps properties on the event I can use to differentiate clicks on the video controls vs. clicks other places in the video element?"
No Apple devices here to test on Safari but, in Chrome the clicking of a UI button (like "Play" or "Fullscreen") does not count as a click on the <video> element itself.
You can differentiate by knowing that if the element (picture part, not buttons) is clicked then it returns as: [object HTMLVideoElement]
In your code you can test as:
vid.addEventListener('click', function(evt) {
alert("click target is : " + evt.target);
vid.controls = !vid.controls
});
As a quick side-note, you can see how there is also an opportunity to create one "master" click function, like document.addEventListener('click' ... where you check the evt.target or even the evt.target.id and use If/Else to control anything clicked on the page from just one function. Example:
if (evt.target.id == "myVid") { ...do_someThing(); }
Finally, see if the code below is doing what you want to actually achieve...
You can preview the code at this W3Schools page :
<html>
<body>
<h1>Video UI : click test</h1>
<video id="myVid" width="320" height="240" loop controls>
<source src="movie.mp4" type="video/mp4">
</video>
<script>
var isPlaying = false;
var vid = document.getElementById("myVid");
vid.addEventListener("click", onclick );
function onclick(evt)
{
evt.preventDefault();
if ( vid.paused == true) { isPlaying = false; }
else{ isPlaying = true; }
if( evt.target.nodeName == "VIDEO") { vid.controls = !vid.controls; }
if ( isPlaying == true) { vid.play(); }
}
</script>
</body>
</html>
I am trying to save some statistics when the user closes the browser, below is the code
if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
hidden = 'hidden';
visibilityChange = 'visibilitychange';
} else if (typeof document.mozHidden !== 'undefined') {
hidden = 'mozHidden';
visibilityChange = 'mozvisibilitychange';
} else if (typeof document.msHidden !== "undefined") {
hidden = 'msHidden';
visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
hidden = 'webkitHidden';
visibilityChange = 'webkitvisibilitychange';
} else {
console.log('in else condition');
}
if (typeof document.addEventListener === 'undefined' || hidden === undefined) {
console.log("App requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
function handleVisibilityChange() {
// Send a ajax call with **async: false**
}
The above code works well in mozilla firefox, google chrome but does not in safari. I am testing this on Mac Os and safari version is Version 12.1.1 (14607.2.6.1.1)
Can any please suggest if this is an expected behaviour in safari and what could be done as a workaround.
Thanks.
According to the MDN docs, the "pagehide" event should work for this:
If you're specifically trying to detect page unload events, the pagehide event is the best option.
https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
A video has audio track and its volume is not zero or muted, but this video is not audible due to its audio track is in total quietness. I want to know how to check whether a video is audible, so I can toggle functions upon.
I found how to check whether a video has audio track from here. #upuoth's method works most browsers except IE10+. #brefd.it works for IE10+ but I didn't know how to use his code (please explain to me)
#upuoth's code
document.getElementById("video").addEventListener("loadeddata", function() {
if (typeof this.webkitAudioDecodedByteCount !== "undefined") {
// non-zero if video has audio track
if (this.webkitAudioDecodedByteCount > 0)
console.log("video has audio");
else
console.log("video doesn't have audio");
}
else if (typeof this.mozHasAudio !== "undefined") {
// true if video has audio track
if (this.mozHasAudio)
console.log("video has audio");
else
console.log("video doesn't have audio");
}
else
console.log("can't tell if video has audio");
});
#brefd's code
function hasAudio (video) {
return video.mozHasAudio ||
Boolean(video.webkitAudioDecodedByteCount) ||
Boolean(video.audioTracks && video.audioTracks.length);
}
var video = document.querySelector('video');
if(hasAudio(video)) {
console.log("video has audio");
} else{
console.log("video doesn't have audio");
}
I prepared three video clips, one with an audio track, one without audio track and one with an audio track but isn't audible. The code I found above only works for the fisrt two clips but for the third one. Please let the alert be "not audible" when playing the third clip by using the code from JSfiddle link.
Below is the merged code of above that you can replace with in your JSFiddle:
document.getElementById("myVideo").addEventListener("loadeddata", function() {
if (typeof this.webkitAudioDecodedByteCount !== "undefined") {
if (this.webkitAudioDecodedByteCount > 0)
alert("This video has a track");
else
alert("no track");
} else if (typeof this.mozHasAudio !== "undefined") {
if (this.mozHasAudio)
alert("This video has a track");
else
alert("no track");
} else if (typeof this.audioTracks !== "undefined") {
if (this.audioTracks && this.audioTracks.length)
alert("audible");
else
alert("not audible");
} else
alert("Not sure");
});
Unfortunately, I doubt if there would be a way to detect "not audible" audio tracks.
There are different ways to check whether a video file has audio or not, one of which is to use mozHasAudio, video.webkitAudioDecodedByteCount and video.audioTracks?.length properties of video, clean and simple...
const video = component.node.querySelector("video");
video.onloadeddata = function() {
if ((typeof video.mozHasAudio !== "undefined" && video.mozHasAudio) ||
(typeof video.webkitAudioDecodedByteCount !== "undefined" && video.webkitAudioDecodedByteCount > 0) ||
Boolean(video.audioTracks?.length)) {
console.log("This video has audio tracks.");
} else {
console.log("This video has no audio tracks.");
}
};
I have a website that has one of those annoying autoplay looping background videos that just play over and over forever instead of using just a picture. I was wondering if it would lighten the resource load on our users machines if I paused the video when they are not looking at my page through the new page visibility API?
To all the geniuses on this site, I would love to see an answer that shows how you determined your answer. I am sort of new to the front-end world and I'm not sure how I would figure this question out.
#stupidkid
Though it has been asked long before, the best solution for you is here : https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
if (document[hidden]) {
//pause video
} else {
//play video
}
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);
Please try this.
I'm working on an HTML5 video logging and transcription application. The transcriptionist needs to be able to start and stop the video using a keyboard shortcut / accelerator rather than clicking a button. Is there a way for me to use javascript to do this without leaving the textarea box?
Thanks,
Norm
Try this JSFiddle. Shortcut for stopping/starting the video is 'alt + enter key'.
HTML:
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls id="video">
Your browser does not support the <code>video</code> element.
</video>
<textarea></textarea>
Javascript (using jQuery):
$(function(e) {
$('textarea').keydown(function(e) {
// shortcut for stopping/starting the video
// is alt + enter
if (e.altKey && e.keyCode == 13) {
toggleVideoPlay();
return false;
}
});
});
function toggleVideoPlay() {
var video = $('#video')[0];
if (video.paused) {
video.play();
} else {
video.pause()
}
}