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.
Related
I have multiple pop ups on one page. each pop up not coded with bootstrap, has a bootstrap carousel inside it. within those bootstrap carousels there may or may not be a vimeo video.
The issue were having is stopping the video from playing on dismiss of the popup or pressing the left and right buttons because with there being multiple videos in different carousels the script below copies the video from the first src it finds and replaces every video with that src.
I've tried using closest() and find() and also tried both of those on the script within the click function to say (this).closest($frame) but this doesn't work either.
Any help would be greatly appreciated.
function stopVideo() {
var $frame = $('iframe#nofocusvideo');
// saves the current iframe source
var vidsrc = $frame.attr('src');
// sets the source to nothing, stopping the video
$frame.attr('src', '');
// sets it back to the correct link so that it reloads immediately on the next window open
$frame.attr('src', vidsrc);
}
$(".carousel-control-prev").click(function(){
stopVideo();
});
$(".carousel-control-next").click(function(){
stopVideo();
});
$(".fa-times").click(function(){
stopVideo();
});
var $frame = $('.carousel-item.active').find('iframe'); fixed this issue
I'm currently using VideoJS in a Rails application (where there is a video player on every page) to display videos and I'm encountering a very strange problem:
The player works perfectly fine on the first page I visit but if I play the video and visit another page, the video from the first page keeps playing in the background even though the page isn't open anymore (you can hear the audio) and the video on the page you visited doesn't initialize properly (options aren't applied which means the video can't be played because controls are an option) and the console reads VIDEOJS: WARN: Player "player" is already initialised. Options will not be applied.
How to I get VideoJS to unload itself when the user leaves the page and why does it keep playing in the first place, the HTML5 video player didn't do that before.
Is the best way around this to get VideoJS to reload itself manually on page load? If so, how can that be done?
Note: If I navigate to any other page within the website the videos continue to not initialize, but if I reload the page, any page, the video on said page works again.
Note 2: Turns out that the onbeforeunload javascript event doesn't even fire if I click a link to another page, it only fires if you're going to a whole different website, so I can't even use that to .dispose() VideoJS on page unload.
Note 3: .reset() doesn't seem to be working either.
You can check to see if the player already exists and unload it, then reload it.
I was actually able to figure out a fairly simple and elegant solution:
if (player) {player.dispose()} else {var player}
player = videojs('player', {
//options
});
First it checks to see if the player exists. If it does, it destroys the VideoJS instance. If it doesn't, it creates the variable. Then it initializes the player.
By Referring this issue : https://github.com/videojs/video.js/issues/2904
We can re-write the above solution to something like this:
const playerId = 'video-player';
const videoOptions = {
controls: true,
sources: [{
src: 'test-file.mp4',
type: 'video/mp4',
}]
};
let player;
let players = videojs.players;
const imaOptions = { adTagUrl };
if (players && Object.keys(players).length) {
player = players[playerId];
player.dispose();
}
player = videojs(playerId,videoOptions);
player.ima(imaOptions);
I found this one to be the solution:
var oldPlayer = document.getElementById('my-player');
videojs(oldPlayer).dispose();
it's in the docs actually
I use the MediaElement.js framework to build my audio players...
But, is a podcast and is normal see users closing the window accidentally.
I'm searching for scripts to this, but absolutely nothing works.
How alert the user when he close the window with the player working...?
If is playing: ask if the user really want this.
If the player isn't playing: close the window..
Add an event as follows:
$(window).bind("beforeunload", function(evt) {//gets called before the user leaves the page
//check if audio is already running
if(isPlayingAudio()) {
//shows a confirm message asking user if they want to stay
return "Are you sure you want to leave while playing music?";
}
})
If your elements are on the page and not stored in javascript
function isPlayingAudio() {
var $playing = $('audio').filter(function(i, $audio) {//all audio not paused
return !$audio.prop('paused');
});
return $playing.length === 0;//no audio elements are playing...
}
I’d like to place interaction controls above a youtube iframe video, and I got it working quite OK by just adding wmode=opaque as arguments and then position the elements absolute above the iframe.
My problem is that on mobile safari - the controls work fine first, but when I return from the fullscreen video, they are all disabled. It works fine on desktop though.
The HTML is basically:
<iframe src="http://www.youtube.com/embed/[ID]?wmode=opaque"></iframe>
<button id="btn">Click me</button>
And then the button is positioned absolute above the iframe.
For a demo, please visit this fiddle using your mobile safari: http://jsfiddle.net/SwGH5/embedded/result/
You’ll see that the button yields an alert when clicked. Now, play the video and click "done". Then try to click the button again...
If the movie was embedded using the <video> tag I could listen for a fullscreen-end event and do something, but now I’m stuck...
Here’s the fiddle: http://jsfiddle.net/SwGH5
So I played around with the iframe API a bit and found a solution. It's kind of hacky... but not really. When a user clicks on the video to play it, the document.activeElement becomes the iframe. When the user clicks the "done" button, the document.activeElement === document.body. So when the video starts playing, we periodically check to see if the active element returns to the body. At that point, the only solution I found was to redraw the iframe. In the example, I destroy() the video and recreate it using the iframe API. I also tried cloning the iframe and replacing it with success (I left that code there so you could see it):
http://jsfiddle.net/ryanwheale/SwGH5/105/
It's not the best solution, but it works. Also, to give an explanation of what [I think] is happening - iOS hijacks any video content (Safari or Chrome) and plays it using the native video player. Any type of OS functionality like this takes place "over" the browser if you will - higher than any z-index... completely outside the browser. When the user clicks "done" the native player kind of zooms out as if it is re-implanting itself on the page. My best guess is that the native player is still hanging out "over" the browser... thus making anything underneath it inaccessible. The fact that the button appears to be on top is just an anomaly... for lack of better description.
EDIT: Ryan Wheale's solution is a better workaround to this problem and will work in most cases.
From Apple’s documentation:
On iOS-based devices with small screens—such as iPhone and iPod touch—video always plays in fullscreen mode, so the canvas cannot be superimposed on playing video. On iOS-based devices with larger screens, such as iPad, you can superimpose canvas graphics on playing video, just as you can on the desktop.
Same goes for a "played video" either. This article clearly states it's not possible.
Workaround:
You could detach and re-attach the iframe element on webkitfullscreenchange. But it won't work for a foreign iframe. Browser will not allow you to manipulate iframe DOM bec. of the cross-domain policy. And even if it did, you could only hide the video overlay to reach your button anyway.
So, the only solution is watching for YT.PlayerState.ENDED state via YouTube iFrame API and then destroying and re-creating the player. But don't worry it plays smooth.
window.onYouTubeIframeAPIReady = function () {
var video = {
player: null,
create: function () {
// first destroy if we already have the player
if (video.player) { video.player.destroy(); }
// create the player
video.player = new YT.Player('ytp', {
videoId: '9u_hp7zPir0',
width: '620',
height: '290',
events: {
'onStateChange': video.onStateChange
}
});
},
onStateChange: function (event) {
// YT.PlayerState.ENDED » exiting full screen
if (event.data === 0) { video.create(); }
}
};
video.create();
};
Here is the working fiddle.
If you can't get it to work with the regular iframe, you might want to consider using mediaelement.js - which can wrap the Youtube API in a HTML5 Media API wrapper. That works fine on safari on ios - try the Youtube example at mediaelementjs.com.
All you need to do is to add the mejs js/css and put your youtube video as source in your video tag, here is some example markup taken from mediaelementjs.com:
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
Then start the player like so:
jQuery(document).ready(function($) {
$('#player1').mediaelementplayer();
});
If you want to add your button ontop of the mejs player it will work fine, just set the z-index high enough. If you want a regular play button you could also consider styling the existing one that comes with mejs.
By the comments from #CullenJ's answer, possibly it might be due to some problem in iOS device browsers not triggering the click event on iframe elements. In that case, you would have to change from:
document.getElementById('btn').onclick = function() {
alert('clicked');
}
To something like this (as answered by #smnh):
$('#btn').on('click tap touchstart', function() {
alert('clicked');
});
I have a Youtube video embeded on a webpage.
Is it possible to have the video go full screen when the user presses play, using the HTML5 iframe with Youtube's API?
Using the Chromeless player is not an option as the website is intended for iPads.
Update November 2013: this is possible - real fullscreen, not full window, with the following technique. As #chrisg says, the YouTube JS API does not have a 'fullscreen by default' option.
Create a custom play button
Use YouTube JS API to play video
Use HTML5 fullscreen API to make element fullscreen
Here's the code.
var $ = document.querySelector.bind(document);
// Once the user clicks a custom fullscreen button
$(playButtonClass).addEventListener('click', function(){
// Play video and go fullscreen
player.playVideo();
var playerElement = $(playerWrapperClass);
var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
if (requestFullScreen) {
requestFullScreen.bind(playerElement)();
}
})
This isn't possible with the youtube embed code or the youtube javascript API as far as I know. You would have to write your own player to have this functionality.
Doing some reading it looks like you can use the chromeless youtube player and it will resize itself to the width and height of its parent element.
That means that if you use the chromeless player you can resize the div with javascript with the play event is triggered.
No, this isn't possible, due to security concerns.
The end user has to do something to initiate fullscreen.
If you were to run an Adobe AIR application, you can automate the fullscreen activation w/o having end user do anything. But then it would be a desktop application, not a webpage.
I thought I would post an easier updated method to solving this one using html5.
.ytfullscreen is the name of the button or whatever you want clicked.
#yrc-player-frame-0 is going to be the name of your iframe.
jQuery(".ytfullscreen").click(function () {
var e = document.getElementById("yrc-player-frame-0");
if (e.requestFullscreen) {
e.requestFullscreen();
} else if (e.webkitRequestFullscreen) {
e.webkitRequestFullscreen();
} else if (e.mozRequestFullScreen) {
e.mozRequestFullScreen();
} else if (e.msRequestFullscreen) {
e.msRequestFullscreen();
}
});