I am requesting full screen on button click for <video>, but the thing is that the play() function does not work when requestFullScreen() is used.
Any idea why not?
Code:
video[0].play();
if(video[0].requestFullScreen) {
video[0].requestFullScreen();
} else if(video[0].mozRequestFullScreen) {
video[0].mozRequestFullScreen();
} else if(video[0].webkitRequestFullScreen) {
video[0].webkitRequestFullScreen();
}
Related
How to open a web page using auto full screen mode?
I am looking for a solution to open an web page automatically in full screen mode, when page is loaded.
At this moment I can do it when I clicked a button.
<body onload="myFunction()">
<h1>Screen Orientation Lock Demo</h1>
<button class="lock">Lock</button>
<textarea></textarea>
</body>
var fullscreen = {
request: function(elem){
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
},
};
$('.lock').on('click', function() {
fullscreen.request(this.parentNode);
});
function myFunction() {
fullscreen.request(this.parentNode);
}
As per documentation:
This method must be called while responding to a user interaction or a device orientation change; otherwise it will fail.
So, the requestFullScreen method should be called after a user interaction with the page or on orientation change.
iam currenlty trying to fix this javascript code but i cant seem to get it right it stills throws out
Uncaught (in promise) AbortError: The play() request was interrupted
by a call to pause()
and i don't understand whats wrong with it so if you guys could help me out i would be truly happy
Here's the code
<html>
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script>
var audioPlayer = null;
window.addEventListener('message', function(event) {
if (event.data.transactionType == "playSound") {
if (audioPlayer != null) {
audioPlayer.pause();
}
audioPlayer = new Audio("./sounds/" + event.data.transactionFile + ".ogg");
audioPlayer.volume = event.data.transactionVolume;
audioPlayer.play();
}
});
</script>
</head>
I had this problem myself when playing with sounds. The below code fixed it for me:
var soundPromise = audioPlayer.play();
//If the promise exists
if (soundPromise != undefined) {
soundPromise.then(function(_) {
//Pause and reset the sound
sound.pause();
sound.currentTime = 0;
});
}
Let me know if you have any issues!
This is the auto play issue in the browser: in short, if you do not make some operation (e.g. click, touch) the browser will not allow media to auto start to play.
Can refer to: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
To fix, you should put the calling of .play() in a call back function of click a button, e.g.
playBtn.onclick = function(){
audioPlayer.play();
}
This is not rather an issue, it is actually a rule.
Relatively new to JS here. I've created a button that embeds a YouTube video on the page when you click it, and the user has the ability to close it. On desktop and Android OS, it can be closed and re-opened as many times as the user wants. However, on iOS, the video only plays the first time.
I believe this issue is caused by the fact that Apple doesn't want the video to play without the user's permission, so when you click the "play" button it brings up the video - but the default YouTube play button itself is not there when the video is closed and re-opened.
This should be most of the relevant code.
VideoPlayer = new VideoPlayer('Header', 'xi2-7FCuDdg');
$("#HomePlayButton").on('click', function () {
disable_scroll();
VideoPlayer.play();
$("#Header").append($('<img src="/images/close.png" />'));
$("#VideoCloseButton").on('click', function () {
VideoPlayer.stop();
VideoPlayer.hide();
enable_scroll();
$("#VideoCloseButton").unbind('click');
$("#VideoCloseButton").remove();
return false;
});
});
this.play = function () {
if (!Initialized) {
// This autoplays the video
Init();
Initialized = true;
} else {
if ($("#" + YouTubeElementId).css('display') == "none") {
$("#" + YouTubeElementId).css('display', 'block');
}
YouTubePlayer.playVideo();
}
}
this.stop = function () {
YouTubePlayer.stopVideo();
}
this.isPlaying = function () {
return (Initialized) ? YouTubePlayer.getPlayerState() == 1 : false;
}
this.hide = function () {
$("#" + YouTubeElementId).css('display', 'none');
}
this.show = function () {
$("#" + YouTubeElementId).css('display', 'block');
}
I'm assuming the easiest way to solve this would be to entirely destroy the iframe and make a new one every time the video is closed, but I was unable to successfully implement that.
Glad to post more code if it's necessary.
I somehow managed to put two options in one button: when clicking, the video starts to play and enters full screen at the same time.
This is the html:
<video id="video1" class="video-small">
<source src="video/Marinela+Pinguinos-HD.mp4" type="video/mp4" class="video-file">
<source src="video/Marinela_Pinguinos-HD.webm" type="video/webm" class="video-file">
</video>
<button id="play" class="full-play-button" onclick="vidplay(); goFullscreen('video1')">Play fullscreen</button>
JAVASCRIPT:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementsByClassName("full-play-button");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
}
So far things go smooth. When entering full screen, there's a default player-like thing at the bottom, with a button offering the possibility to exit full screen.
What I would like to achieve is to be able to pause the video when clicking that button, but I have no idea how.
What I can think of is some kind of a function that detects if we're full screen or not, and if we're not, it would pause/stop (not sure which I prefer yet) the video.
This is what came to my mind, but I'm really a newbie in JS and it doesn't work:
function exitPause() {
var video = document.getElementById("video1");
if (document.exitFullscreen) {
video.pause();
}
else if (document.mozCancelFullScreen) {
video.pause();
}
else if (document.webkitExitFullscreen) {
video.pause();
}
else if (element.msExitFullscreen) {
video.pause();
}
}
What am I doing wrong? How can I make it happen?
Use fullscreenchange event handler:
video.addEventListener(
'fullscreenchange',
function(event) {
if (!document.fullscreenElement) {
video.pause();
}
},
false
);
Note: care for vendor prefixes.
Thanks to Igor Gilyazov I managed to go a bit further. This is how the code looks now:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementsByClassName("full-play-button");
video.addEventListener(
'webkitfullscreenchange',
function(event) {
if (!document.fullscreenElement && video.paused) {
video.play();
}
else {
video.pause();
}
},
false
);
}
and going full screen:
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
What happens now is when I first click the button, it goes full screen and the video plays. When going back to small screen, it pauses.
This is great.
Unfortunately it happens only every second time (the next time it keeps being paused no matter if going full or small, then right again, then wrong and so on).
I know I'm close, but it's not fully working yet, any ideas for modifications?
I have read previous posts on this and documents by microsoft but cannot seem to get my app to run Sound in the background. It plays 100% but when ever the app is then suspended the music also stops. I have added "Background Tasks" declarations selecting Audio and my audio tag looks like this
<audio id="musicplayr" msAudioCategory="BackgroundCapableMedia" controls="controls"><source src="song.mp3"/> </audio
and finally my javascript includes the references to MediaControls
var MediaControls = Windows.Media.MediaControl;
// Add event listeners for the buttons
MediaControls.addEventListener("playpressed", play, false);
MediaControls.addEventListener("pausepressed", pause, false);
MediaControls.addEventListener("playpausetogglepressed", playpausetoggle, false);
// Add event listeners for the audio element
document.getElementById("musicplayr").addEventListener("playing", playing, false);
document.getElementById("musicplayr").addEventListener("paused", paused, false);
document.getElementById("musicplayr").addEventListener("ended", ended, false);
and below in the code i have the event handlers
// Define functions that will be the event handlers
function play() {
document.getElementById("musicplayr").play();
}
function pause() {
document.getElementById("musicplayr").pause();
}
function playpausetoggle() {
if(MediaControls.isPlaying === true) {
document.getElementById("musicplayr").pause();
} else {
document.getElementById("musicplayr").play();
}
}
function playing() {
Windows.Media.MediaControl.isPlaying = true;
}
function paused() {
Windows.Media.MediaControl.isPlaying = false;
}
function ended() {
Windows.Media.MediaControl.isPlaying = false;
}
*Note musicplayr is the reference for the html5 tag
Any help appreciated why this is not working?
You also need an event handler for the stoppressed event. Without any of the four handlers--playpressed, pausepressed, playpausetogglepressed, and stoppressed--background audio won't be enabled. See http://social.msdn.microsoft.com/Forums/en-IN/winappswithhtml5/thread/2ca0c122-df31-401c-a444-2149dd3e8d68 on the MSDN forums where the same problem was raised.
.Kraig