I have an iframe with a html5 video player and it also has some javascript that makes a Click Pause/Play event and it works fine if I visit the page directly. But if I access it from an iframe I must first double click it to get the single click event working.
Can anybody help please.
This is the javascript being executed.
<script>
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
video.pause();
videoPlaying = false;
}
else {
video.play();
videoPlaying = true;
}
}
</script>
It is because the iframe is drawn as a separate web page, and as such needs to gain focus before the button inside it can be clicked.
Related
I'm preparing a survey where I ask people to listen to a number of audio files once only. To do that, I've used a javascript that hides the audio button after the audio has been played X number of times.
The problem is that, although the button disappears when it should, one can still play the audio file by clicking on the empty space where the button used to be.
Is there a way to avoid this - for instance by disabling controls or mouse click after an audio has been played?
Below is a part of javascript that I have at the moment, courtesy of a kind Qualtrics user. Any idea as to how I can amend it? I'm a coding newbie so any help is hugely appreciated!
Many thanks!
Chiara
// CREATE playAudio() FUNCTION
function playAudio() {
playcount++; //increase playcount number by
1
console.log(playcount);
var button =
document.getElementById("audiobutton");
//grab button id
button.style.visibility = "hidden"; //hide
the button so that it can't be played
anymore
audio.play(); //play the audio one last
time
//update play_count embedded data to
current
playcount number
Qualtrics.SurveyEngine.setEmbeddedData("play_co
unt", playcount);
};
audio.onended = function() {
if (playcount < 1){
var button =
document.getElementById("audiobutton");
//grab button id
button.style.visibility = "visible";
//show button again
} else {
button.style.display = "none";
}
};
I have a page with video thumbnails. When a video is clicked, it opens file video.html and passes the video path to it.
I am trying to make video.html open the video in full screen but when I say full screen I really mean all screen with no browser visible.
This is the contents of video.html
<body>
<script>
window.onload=function() {
let videoDiv = createVideoDiv()
if (videoDiv.requestFullscreen) {
videoDiv.requestFullscreen();
}
else if (videoDiv.mozRequestFullScreen) {
videoDiv.mozRequestFullScreen();
}
else if (videoDiv.webkitRequestFullScreen) {
videoDiv.webkitRequestFullScreen();
}
else if (videoDiv.msRequestFullscreen) {
videoDiv.msRequestFullscreen();
}
document.getElementById("myVideo").appendChild(videoDiv);
}
</script>
<div id="myVideo"></div>
</body>
this is createVideoDiv():
function createVideoDiv() {
var video = document.createElement("VIDEO");
video.setAttribute('controls', '');
video.setAttribute('autoplay', '');
video.setAttribute('width', '100%');
var source = document.createElement("SOURCE");
source.setAttribute('src', getClickedVideo());
source.setAttribute('type', 'video/mp4');
video.appendChild(source);
return video;
}
and this is the css:
#contentVideo:fullscreen {
width:100vw;
height:100vh;
}
The page opens, the video autoplays, it's filling the whole inner part of the browser. I still see the browser.
How do I do that?
Becoming full screen should be done by one user action, click, tap, or etc.
It has a JS code of course, but wouldn't run automatically when pages loads, because browser prevents that unless user does something.
That is a good and maybe necessary feature in order to stop ads annoy people.
So, simply make a button or something and assign your function as onclick handler.
As F.NiX stated try to addEventListener to the window, when user clicks or presses a button or some other user input event. Then inside the callback just call element.requestFullscreen() on the DOM element you want to go fullscreen. You can refer to this page for details: MDN Fullscreen API docs
For example, when user clicks somewhere on the page, the element will go fullscreen.
window.addEventListener('mousedown', ()=>element.requestFullscreen(), {once:true});
I've added {once:true} simply to delete the listener once it is called so it doesn't slow down the page. You can remove it if you want to.
I am making a chrome extension where user can make playlists of songs. For that when I click on play button I need that new tab should open and the video should start playing but youtube video doesn't play without switching over to that tab. I tried to use the 'canplay' eventlistener but it also is called only when I switch over to that tab in which video is played. Can somebody help?
console.log("Hello from content script!");
var video = document.getElementsByTagName("video")[0];
if(video) {
video.addEventListener("ended", function() {
console.log("Video ended");
//alert('Ended');
chrome.runtime.sendMessage(
"ended"
);
})
video.addEventListener("canplay", function(event) {
alert("noted");
//video.play();
let playbtn = document.getElementsByClassName('ytp-play-button ytp-button')[0];
playbtn.click();
})
} else {
//console.error("Video element not found");
}
Have you tried adding I?&autoplay=1 to the end of the youtube links?
I am able to control the audio through mouse is there any to control the audio through keyboard the code that i tried is here the controlling happens with button i need this without button how can i do this
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
Use postMessage, to transfer the data from one page to another. On the newly opened page do sth like this:
window.addEventListener("keydown",function(key){
window.postMessage(key,"*");
});
To receive this, simply listen for the message event on your main site:
window.addEventListener("message",function(data){
origin=data.origin
//check if this is your site to prevent hijacking
key=data.data;
//do whatever
});
In my code I tried pausing the youtube video by using Javascript. I took this question (below) as a reference, and it works great.
How to pause a YouTube player when hiding the iframe?
The problem is that it is refreshing my website. I'm not exactly sure as to why that is or if there is any sort of workaround... This is my code... I'm using an AjaxModalPopupExtender to hide/show my div.
function ShowModalVideo() {
var Popup = $find("<%=mpeVideo.ClientID%>");
if (Popup) {
Popup.show();
}
return false;
}
function HideModalVideo() {
var Popup = $find("<%=mpeVideo.ClientID%>");
if (Popup) {
Popup.hide();
var iframe = document.getElementById("youtube");
iframe.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
return false;
}
I'd really appreciate any help or insight on the matter.