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()
}
}
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 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()
}
I'm creating a webpage were I want people to be able to press a button on their keyboard to play a sound and I have gotten this part to work by googling around a bit. Now however I want an on/off switch on the page that can turn the sound from the keyboard presses off so that people who don't want the keypresses to make a sound can have that option, is this possible?
Right now I'm using this JavaScript and HTML to play a sound whenever a button is pressed (A in this example):
JavaScript:
$(document).keydown(function(e){
if (e.keyCode == 65) {
document.getElementById('A').play();
return false;
}
});
HTML:
<audio id="A" src="A.ogg"></audio>
Just set a boolean flag to track the playing state and check the flag to do the right operation:
Here's the long version:
var playing = false;
var playsound = function(e){
if (e.keyCode === 65 && !playing) {
document.getElementById('A').play();
playing = true;
return false;
} else if(e.keyCode === 65 && playing){
document.getElementById('A').pause();
playing = false;
return false;
}
}
Or, a more condensed version:
var playing = false;
var a = document.getElementById('A');
document.addEventListener("keydown", function(e){
if (e.keyCode === 65){
(!playing) ? a.play() : a.pause();
playing = !playing;
console.log("Sound is: " + playing);
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<audio id="A" src="" controls></audio>
You could remove the listener and re-add it on the button click
var playsound = function(e){
if (e.keyCode == 65) {
document.getElementById('A').play();
return false;
}
}
var soundEnabled = true;
$("body").on("keydown", playsound);
$(#button).click(function(){
soundEnabled = !soundEnabled;
if(soundEnabled){
$("body").on("keydown", playsound);
}else{
$("body").off("keydown", playsound);
}
});
I've finally found a solution after googling around for everything I could imagine and finally I found this answer on another question someone else asked on this site! So this is how I did it using that answer:
HTML
<audio id="A" src="A.ogg"></audio>
<button onclick="document.getElementById('A').muted=!document.getElementById('A').muted">Mute/ Unmute</button>
Javascript
$(document).keydown(function(e){
if (e.keyCode == 65) {
document.getElementById('A').play();
return false;
}
});
So with this method I didn't have to change the Javascript at all and it still does exactly what I wanted it to do!
Thanks to everyone who tried to help but as this is my first time ever using javascript I didn't understand what I was supposed to do with your answers. This answer that I found also made a lot of sense to me as I do know at least a little about how HTML works ... But yeah, thanks anyway!
What is the way to disable or prevent events from the play/pause button in the html5 audio element?
I am trying something like this:
document.getElementById(id).addEventListener("pause", function() {
$(this).trigger("play");
});
This works when alone, but my problem is that I would like to control the play/pause when clicking on the div where the audio element is in:
<div id="my_div">
<audio controls id="my_audio">
<source src="my_song.mp3" type="audio/mpeg">
</audio>
</div>
var is_playing;
$("#my_div").click(function () {
if (is_playing) {
$('#my_audio').trigger("pause");
is_playing = false;
} else {
$('#my_audio').trigger("play");
is_playing = true;
}
});
so this causes conflict when I use the pause/play buttons of the audio element. So, I am searching a way to prevent the event of the play/pause audio element control (but not the whole controls as I need to use the seekbar and volume).
play and pause are not jQuery methods. Try calling .play(), .pause() on <audio> element
$(function() {
var is_playing;
$("#my_div").click(function(e) {
// if `e.target` is not `<audio>` element
if(e.target.tagName !== "AUDIO") {
if (is_playing) {
$('#my_audio')[0].pause();
is_playing = false;
} else {
$('#my_audio')[0].play();
is_playing = true;
}
} else {
e.stopPropagtion()
}
});
});
plnkr http://plnkr.co/edit/l5NejZ4rvxTZLPghkFWF?p=preview
I have the following modal box:
<div class="modal-video" id="v-5417">
<div class="video-player">
<video id="v-5417-tape" preload="none">
<source type="video/mp4" src="videos/anthem-od47.mp4">
<source type="video/webm" src="videos/anthem-od47.webm">
</video>
<div class="close-modal fade-control"></div>
</div>
</div>
and trying to use the following e.keyCode to close the modal:
$(document).keydown(function (e) {
if (e.keyCode == 27) {
$(".modal-video").hide();
}
});
This is only hiding the video, but not closing the modal and killing the video. How can I completely close the modal and video together?
jQuery .hide() just changes the CSS style to display:none, so your video is hided and still playing in the background. To fix that issue, you can stop playing the video by standard HTML5 pause() method.
If hiding $(".modal-video") doesn't work for you, then I assume you need to hide it's parent - but we have to see more your code to be sure about that.
$(document).keydown(function (e) {
if (e.keyCode == 27) {
var video = document.getElementById("v-5417-tape");
video.pause()
$(".modal-video").parent().hide();
}
});
If you are using some kind of player template or plugin, and click on class "close-modal" hides the modal as you expect - then you can use jQuery .toggle() method to call click event on that element, when you press your key.
$(document).keydown(function (e) {
if (e.keyCode == 27) {
var video = document.getElementById("v-5417-tape");
video.pause()
$(".close-modal").toggle("click")
}
});
The active state has to be removed, and that disabled the popup.
$(document).keydown(function (e) {
var video = document.getElementById("v-5417-tape");
if (e.keyCode == 27) {
if(video.play){
video.pause();
}
$(".modal-video").removeClass("active");
}
});