I am trying to display a video in fullscreen when the user clicks on a link/button. This is working fine in desktop but not working well on iPad using chrome.
According to this http://caniuse.com/fullscreen there are some restrictions but i can't find chrome/ios on that table.
If somebody tells me that it's an operative system restriction I will really appreciate a link from a nice source.
Here's some code:
HTML:
<video id="video1" width="420" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />Your browser does not support HTML5 video.</video>
<button onclick="PlayFunction();">PLAY</button>
Javascript:
function PlayFunction()
{
launchFullScreen(document.getElementById("video1")); // any individual element);
$("#video1")[0].play();
}function launchFullScreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else {
alert("no cai en ningun lado");
}
}
JSfiddle: http://jsfiddle.net/9aSjn/16/
According to this link http://www.mobilexweb.com/blog/chrome-ios-android-4-1-jelly-bean-html5 :
That’s is because Chrome for iOS is not Chrome. What?? It has a
Chrome-style UI, onmibox, search by voice and it has Chrome synching.
However, the rendering and execution engine are not Chrome.
I called them pseudo-browsers and you can see my opinion and a good
discussion on the comments area in my previous post. So Chrome for iOS
is in fact using the iOS Web View that share most of the code with
Safari.
The User Agent that Chrome for iOS is using is the Safari one with one
addition: “CriOS” (Chrome for iOS I guess). There is no “Chrome” word
inside the User Agent, so if you are doing something special for
Chrome, you are safe and it’s not going to be executed on Chrome on
iOS.
Conclusion, when you are using Chrome on iOS you are using Safari, and that's why it doesn't appear in the caniuse table.
Related
I'm trying to make a video (or anything else) go into a fullscreen mode in the Edge browser through JavaScript. But I can't get it to work. In Chrome everything works as expected.
I tried all steps in the js command line tool. The correct html video element is fetched with the line document.getElementById("video_player");. Then I tried to enter the command video.requestFullscreen();, but it's not doing anything. Not even an error :(
I have activated the fullscreen API in the about: flags settings and I've turned off all browser extension.
The HTML video element is not inside an <iframe>
EDIT:
This is my full code. The js file is loaded at the end of the HTML document. As you can see it's not doing much right now.
console.log("Running");
var video = document.getElementById("video_player");
FullScreenStart();
function FullScreenStart(){
console.log("AutoFullScreen started");
console.log(video);
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
}
function FullScreenOn(){
console.log("FullScreen activated");
}
function FullScreenOff(){
console.log("FullScreen deactivated");
}
document.onwebkitfullscreenchange = function(evt) {
if(document.webkitIsFullScreen){
FullScreenOn();
} else {
FullScreenOff();
}
};
Please, can somebody help me to get this to work? I've wasted two days on this problem now.
I made a test with your above posted code.
I find that your code will not work in any browser, If you call the fullscreen api using code.
I am not sure, how it works on chrome as you said in original post.
If you refer the documentation than you can find information below.
Note: This method must be called while responding to a user interaction or a device orientation change; otherwise it will fail.
Reference:
Element.requestFullscreen()
As said in the documentation, Method get failed in both Chrome and Edge if I call it from code but it works if user try to call it using button click.
Example code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open the video in fullscreen mode.</p>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<video width="100%" controls id="myvideo">
<source src="rain.mp4" type="video/mp4">
<source src="rain.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
/* Get the element you want displayed in fullscreen */
var elem = document.getElementById("myvideo");
/* Function to open fullscreen mode */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier does not support fullscreen mode.</p>
</body>
</html>
Reference:
HTML DOM requestFullscreen() Method
It was done intentionally, Because if it get work from code than so many sites starts showing pop ups without asking permission from user. Which can be annoying for user.
HTML5 video autoplay doesn't work on phones and tablets.
I checked on the phone with Android 4.2.2 in Chrome 60 and iPad. Also, I checked on the phones with Android 4.2.2 and 7.0.
I tried to use such scripts:
// 1
$(window).load(function () {
$("video[autoplay]").get(0).play();
});
// 2
$(window).on("scroll", function() {
var video = $("video[autoplay]").get(0);
if (video.paused) {
video.play();
}
});
// 3
$(window).on("touchstart touchmove touchend touchcancel", function () {
var video = $("video[autoplay]").get(0);
if (video.paused) {
video.play();
}
});
HTML:
<video id="video" autoplay="" loop="" playsinline="" muted="">
<source src="videos/video1.mp4" type="video/mp4">
</video>
The first variant doesn't work at all.
The second one runs scripts inside of it, but the video doesn't play.
The third one runs scripts inside of it, but the video play only on the click!
Here is codepen.
Here is website
Autoplay will not work with mobile browsers because mobile will be on network data, and if any auto play video starts playing, then it will consume data without user's permission and knowledge. So this is disabled for mobile browsers by default.
But still you can check these url for your solution:
Since the release of iOS 10 Apple has allowed video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/
Chrome 53 on Android also allowing video autoplay: https://developers.google.com/web/updates/2016/07/autoplay
After switching to fullscreen mode (tested on chrome and safari), I can't type any letters or numbers in text inputs, but I still can enter special characters like *¨%£ but no simple letters...
The code is really simple :
HTML
<button type="button" id="fullScreen">LAUNCH FULLSCREEN</button>
<input type="text" />
JS
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
document.getElementById("fullScreen").addEventListener("mousedown", function(){
launchFullScreen(document.documentElement);
}, false);
As Jan Dvorak mentioned, the problem appears only when using the js function, the bug doesn't appears when using the browser build-in fullscreen button/shortcut
See it in action :
http://jsfiddle.net/QwqT7/show/
UPDATE 2 :
Just tested on Firefox for mac, no problems in fullscreen mode.
It seems that the problem is webkit only.
It's not a perfect solution, but at least it will allow Chrome to responds to keyboard commands and let Safari use the fullscreen mode without key inputs as a fallback.
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)){
element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
setTimeout(function() {
if (!document.webkitCurrentFullScreenElement && element.webkitRequestFullScreen()) {
element.webkitRequestFullScreen();
}
},100);
}
Mozilla note says:
For security reasons, most keyboard inputs have been blocked in the fullscreen mode. However, in Google Chrome you can request keyboard support by calling the method with a flag...
I need to load in different movie formats based on browser type. Specifically if the user is using firefox then I need to load in a .ocv video.
I have tried using:
alert(navigator.appName);
but this always returns 'Netscape' in both chrome and firefox??
Is there a better alternative?
Cheers
STOP!!! all proposed solutions are the reason the web is broken&breaking!
Don't assume a browser, based on the name you regexp out of the userAgent, can do something or not just because it sais its an IE, Firefox or Chrome. UserAgents can be and are faked! Do a feature detection either by hand or use something fullfeatured like Modernizr
What you want to do is provided via javascript. To check if the browser can do html5 video playback;
var canHtml5Video=function(){
return !!document.createElement("video").canPlayType;
}
To check if the Browser can play a certain type (mp4, ogg), use the canPlayType method of the audio/video element.
var elem=document.getElementsByTagName("video")[0];
if (elem.canPlayType("video/mp4")===""){
//handle firefox and all browser that cant pay the mp4 royality fee
}
else{
//handle mp4
}
Alternativ, you can just add multiple source elements to the video element. The Browser will chose what fits best.
<video>
<source src="http://....mp4" type="video/mp4" />
<source src="http://....ocv" type="video/ogg" />
</video>
Try
alert(navigator.userAgent);
For more information: http://www.w3schools.com/js/js_browser.asp
You want to use some like
this
Use navigator.userAgent to get the browser details
if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
// Inside firefox
}
if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1) {
// Inside chrome
}
if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
// Inside IE
}
for ie:
var ie = $.browser.msie;
for firefox:
var mozilla = $.browser.mozilla;
for chrome:
var chrome = $.browser.webkit && window.chrome;
for safari:
var safari = $.browser.webkit && !window.chrome;
Sound doesn't play when I use Firefox.
If plays with IE and Safari! Here is the code:
<embed src="http://www.myWebSite.com/Play/Sound/someSound.wav" autostart="false" width="1" height="1"
id="someSound" enablejavascript="true" />
Somewhere in the JS, I have this: playSound("someSound");
function playSound(mySound) {
var snd = document.getElementById(mySound);
try {
snd.Play();
}
catch (e) {
try {
snd.DoPlay(); // Some browsers doesn't understand the Play() command
}
catch (e) {
// Do nothing if no Windows Media Player nor Quicktime installed
}
}
}
Besides, when I try some other website with embedded sound, it plays!
Why? Any clue welcome :-)
You are probably missing a Quicktime or WMP plugin for Firefox!
Firefox 3.5+ supports the <audio> tag so your could alternatively look into that.