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
});
Related
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.
For starters, my knowledge of javascript is not so great. But I have managed to implement a script that sends an email when my users start a video. For your information: It is a private location after login, so it is not a public website.
The problem is with this script it does not only send an e-mail on start of the video, it also sends an e-mail every time the user presses the pause and play button during watching the video. I only want to know when the video is started from the beginning of the video. So not every time it is paused and started again. Is this possible? And if so, how do I do this? Thanks so much for your help.
`<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.on('play', function() {
window.open("https://mywebsitelocation”, “myiframe”);
});
</script>`
I looked at the Vimeo API after I made my comment, and I think this should work:
player.on('play', function(event) {
if (event.seconds === 0) {
window.open('https://mywebsitelocation', 'myiframe');
}
});
Since there is a separate pause event in the API, I am a bit surprised that the above callback is triggered, as you say, when the player is paused too.
Perhaps if you add something like this:
player.on('pause', function() {});
...so that there's a separate do-nothing callback for pause, the play callback won't be triggered for pause.
First of all, I know about the fact that a video on a website, under iOS, will play only on user action (unless a click event is set).
I have a HTML5 video element:
<video muted="muted" loop id="js-b2b-video">
<source src="my_video.mp4" type="video/mp4">
</video>
Then, in JS, there's a piece of code listening to the scroll event of the window:
$(window).on('scroll', function() {
var $video = $('#js-b2b-video');
// Check if the video is in the viewport
// and if YES, play it:
$video.get(0).play();
});
The code above works on Windows and macOS - in Chrome, Edge, Firefox and Safari. However, on any browser running on iOS9 (e.g. on iPad 1) - nothing happens, the video does not start.
So, I tried to simulate a click:
// Listener
$('#js-b2b-video').on('click', function() {
$(this).get(0).play();
});
// Modified scroll listener
$(window).on('scroll', function() {
var $video = $('#js-b2b-video');
// Check if the video is in the viewport
// and if YES, play it:
$video.click();
});
And nothing. Hitting the wall.
I need to be able to start the video on iOS without the user interaction. What am I missing?
PS. Tapping (clicking) on the video doesn't start it either.
Just like #CBroe told you in his comment, read the link he put (motivation part):
A note about the user gesture requirement: when we say that an action must have happened “as a result of a user gesture”, we mean that the JavaScript which resulted in the call to video.play(), for example, must have directly resulted from a handler for a touchend, click, doubleclick, or keydown event. So, button.addEventListener('click', () => { video.play(); }) would satisfy the user gesture requirement. video.addEventListener('canplaythrough', () => { video.play(); }) would not.
So it basicaly says that you cannot use any event or action from the user to start playing the video.
Then your 'scroll' event cannot work ^^
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.
There is an onClick event for a link, and I am playing some audio using these lines there:
tts = new Media(url, onSuccessTTS, onErrorTTS);
tts.play();
However, if user clicks second time on the link before it finishes playing the first media, it plays the same file simultaneously again. Is there any way to prevent playing if the media is currently being played?
There is a callback event for mediaStatus, but it is not documented.
http://docs.phonegap.com/en/1.0.0/phonegap_media_media.md.html
With the phonegap media api, you are manually creating an audio player. Therefore you must manage the state of your player programatically.
Since there should be one control for your media player, I would keep the state on the HTML DOM element that has the play button
//on click
var $el = $(this); //or $('someselector');
//check if you have already added the playing state to the element
if ($el.data('state') == 'playing') {
//pause or ignore
} else {
$el.data('state', 'playing'); //save state on element
tts = new Media(url, onSuccessTTS, onErrorTTS);
tts.play();
} // handle stopped if needed
BTW phonegap is up to version 2.0, so consider using the 2.0 media api.