I am trying to set properties on a video where arrowLeft keypress is -1 frame and arrowright keypress is +1 frame, but I not able to prevent default behavior.
I've tried using e.preventDefautl() e.stopPropagation and return false.
<video id="video_1" class="video" controls class="video" width="800" height="600" mediagroup="videoMG1" autobuffer preload >
<source src="{{movie["url"]}}" />
</video>
var video = document.getElementById("video_1");
video.addEventListener("keypress", function(e){
return false;
});
video.addEventListener("keyup", function(e){
return false;
});
var video2 = VideoFrame({
id: 'video_1',
frameRate: 25.00,
callback: function(response) {
console.log(response);
}
});
video.addEventListener("keydown", function(e){
e.preventDefault()
e.stopPropagation()
debugger;
if( e.KeyCode == 39 ){
console.log("backward")
video.seekBackward(1)
}else if( e.KeyCode == 37) {
console.log("forwrd")
video.seekForward(1)
}
return false;
});
When I enter the debugger, the video has already process the keypressed and moved forward 7 seconds instead of a frame as I would like to.
Thanks for your help !
This is caused by the standard controls displayed by the browser itself.
The only way to get around this is deactivating it completely using:
video.controls=false;
Furthermore you're calling the seekBackward() and seekForward() methods on the wrong object. I assume you're using the VideoFrame library, do you?
At the moment you're doing it like this
video.seekBackward(1);
This is the html5 video element itself - you need to use the VideoFrame object, video2 in your case.
video2.seekBackward(1);
Here's the full code:
<html>
<body>
<script type="text/javascript" src="VideoFrame.min.js"></script>
<video id="video_1" class="video" controls class="video" width="800" height="600" mediagroup="videoMG1" autobuffer preload>
<source src="myVideo.mp4" />
</video>
<div id="videoControls">
<button type="button" id="playPause">āµ</button>
<button type="button" id="mute">š</button>
<input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
</div>
<script>
var video = document.getElementById("video_1");
var video2 = VideoFrame({
id: 'video_1',
frameRate: 25.00,
callback: function(response) {
console.log(response);
}
});
video.controls = false;
video.addEventListener("keydown", function(e) {
console.log("asd", e.keyCode)
if (e.keyCode == 39) {
console.log("backward")
video2.seekBackward(1)
} else if (e.KeyCode == 37) {
console.log("forwrd")
video2.seekForward(1)
}
return false;
});
document.getElementById("playPause").addEventListener("click", function() {
if (video.paused == true) {
video.play();
this.innerHTML = "āø";
} else {
video.pause();
this.innerHTML = "āµ";
}
});
document.getElementById("mute").addEventListener("click", function() {
if (video.muted == false) {
video.muted = true;
this.innerHTML = "š";
} else {
video.muted = false;
this.innerHTML = "š";
}
});
document.getElementById("volumeBar").addEventListener("input", function() {
video.volume = volumeBar.value;
});
</script>
</body>
</html>
Related
I'm looking to implement a space-to-pause system for a HTML5 video on my site via jquery, but what I find is that when I've clicked on an input on the same page, adding a space to the text input doesn't work. It just keeps playing/pausing the video.
What I'm looking to do is some kind of if statement that says "if input is not focused, press space to pause video", but also something to repeatedly check this condition so it doesn't happen just once.
I was almost successful using setInterval to do this but jquery's timing is completely imprecise and just leads to the video only pausing sometimes.
Current space-to-pause code is as follows.
$(window).keypress(function(e) {
var video = document.getElementById("vid");
if (e.which == 32) {
if (video.paused)
video.play();
else
video.pause();
}
});
Thanks for any help.
I'd suggest checking the target of your click event and working based on that! Something like this should work
$(window).keypress(function(e) {
const video = document.getElementById("vid");
// check if keypress event originates from an input and if so; NOOP
const nodeName = e.target.nodeName;
if (nodeName && nodeName.toUpperCase() === "INPUT") { return; }
if (e.which == 32) {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video controls id="vid" style="width: 400px; display:block;">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/mp4">
</video>
<input type="text" value="write here!">
I have the follow code, for make a IFRAME go to FullScreen with button click,
var button = document.querySelector('#container .button');
button.addEventListener('click', fullscreen);
// when you are in fullscreen, ESC and F11 may not be trigger by keydown listener.
// so don't use it to detect exit fullscreen
document.addEventListener('keydown', function (e) {
console.log('key press' + e.keyCode);
});
// detect enter or exit fullscreen mode
document.addEventListener('webkitfullscreenchange', fullscreenChange);
document.addEventListener('mozfullscreenchange', fullscreenChange);
document.addEventListener('fullscreenchange', fullscreenChange);
document.addEventListener('MSFullscreenChange', fullscreenChange);
function fullscreen() {
// check if fullscreen mode is available
if (document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled) {
// which element will be fullscreen
var iframe = document.querySelector('#container iframe');
// Do fullscreen
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
} else if (iframe.webkitRequestFullscreen) {
iframe.webkitRequestFullscreen();
} else if (iframe.mozRequestFullScreen) {
iframe.mozRequestFullScreen();
} else if (iframe.msRequestFullscreen) {
iframe.msRequestFullscreen();
}
}
else {
document.querySelector('.error').innerHTML = 'Your browser is not supported';
}
}
function fullscreenChange() {
if (document.fullscreenEnabled ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
document.msFullscreenElement) {
console.log('enter fullscreen');
}
else {
console.log('exit fullscreen');
}
}
<div id="container">
<div class="top-left">
<button class="button">Ver EcrĆ£ Completo</button>
</div>
<iframe src="http://google.pt" Title="google" frameborder="0"></iframe>
<div class="error"></div>
</div>
I pretend disable refreshing/reload when I go to fullscreen and vice versa, how I missing and how can I make it?
ps: I have added google as example.
note: The Iframe to be added as SWF and JavaScript.
Solved!
I forget remove the follow code on primary code:
var iframe = document.querySelector('iframe');
iframe.src = iframe.src;
I'm trying to set rewrite some shortcut function for video. Everything works fine except when pressing spacebar. Here's my code:
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if (e.which == 32 || e.which == 80) {
e.preventDefault();
e.stopPropagation();
video.paused ? video.play() : video.pause();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
Here I use spacebar and P to toggle play and pause. Using spacebar somehow toggled two times while using P not.
I try adding event listener of keyup and keypress to reject the spacebar input. But It doesn't work too.
Is there anything about the HTML5 Video I am missing?
Since the spacebar by default plays and pauses the video, you have to invert functions in your ternary operator. No need to change them when dealing with the p tag.
So the only way is to handle the two different key codes in 2 different ifs.
See below the working code snippet.
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if (e.which == 32) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
else if (e.which == 80) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.play() : video.pause();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
If you cannot split it, what about nesting the if-else?
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if (e.which == 32 || e.which == 80) {
if (e.which == 80) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.play() : video.pause();
return false;
} else {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if ([32,80].includes(e.which)) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
So I made a script in JavaScript that would play a mp3 file and then there would be an image that you would click on to toggle whether on not the audio should play. When I click on the picture it stops playing the mp3 file which is what I wanted it to do but when I click on it again it doesn't resume or start over the song.
<script type="text/javascript">
var audio = document.getElementById("myAudio");
function detectmob() {
if( navigator.userAgent.match(/Android/i) //Checks if on mobile
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
return true;
}
else {
audio.play();
}
}
function Pause() {
if (audio.play = false) {
audio.play()
}
else {
audio.pause();
}
}
window.onload = detectmob;
</script>
<center> <input type="image" onclick="Pause()" src="/images/Nor.gif" style="width:750px;height:400px;"></center>
Your condition check audio.play = false is wrong, it is assigning the value false to play property overriding the default function reference.
You can use the paused property to check whether the audio is paused.
function Pause() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
}
I have this script which should pause the HTML5 video when space bar is pressed. Bur in Firefox it pauses on all keys you press no matter is space or other and in Chrome it doesen't work at all.
Also double clicking the video doesen't go to full screen.
$(window).keypress(function(e) {
if (e.keyCode == 0) {
if (video.paused == true)
video.play();
else
video.pause();
}
});
$video.dblclick(function() {
video.mozRequestFullScreen();
video. webkitRequestFullscreen();
video.requestFullscreen();
});
fiddle: http://jsfiddle.net/6f7navgu/4/
Try the snippet below
var video = document.getElementById('video_id');
document.onkeypress = function(e){
if((e || window.event).keyCode === 32){
video.paused ? video.play() : video.pause();
}
};
To have the video in fullscreen mode, use the following one
var video = document.getElementById("video_id");
document.ondblclick = function(){
if(video.requestFullscreen){
video.requestFullscreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.webkitRequestFullscreen){
video.webkitRequestFullscreen();
}
};
Working jsBinl
Use keyup and Event.keyCode === 32 instead. Fiddle
If you like, you could use keydown as well in this case, because you're not testing for an input value.
Ok this is jquery and it pause and plays video with space and on video window click:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('#videoID').click(function(){this.paused?this.play() :this.pause();});
$(window).keypress(function(e) {
if (e.keyCode == 32 || e.keyCode === 32) {
$('#videoID').get(0).paused?$('#videoID').get(0).play() :$('#videoID').get(0).pause();
}
});
</script>
Double clicking wouldn't go to full screen; you would have to add that action. As for pause, try which property of the jQuery event.
$(window).keypress(function(e) {
// debugger;
if (e.which == 32) {
if (video.paused == true)
video.play();
else
video.pause();
}
});
Uncomment the debugger so that you can inspect the event that happened.
Try this snippet
$(window).keypress(function(e) {
if (e.which == 32) {
video.paused ? video.play() : video.pause();
}
});
video.ondblclick = function(){
video.requestFullscreen();
};