Show html5 video controls only on Android - javascript

I have this video tag with flash fallback:
<video id="myvideo" width="480" height="224" autoplay preload="auto" loop poster="intro6.jpg">
<source src="intro6.mp4" type="video/mp4">
<source src="intro6.webm" type="video/webm">
<source src="intro6.ogv" type="video/ogg">
<object width="480" height="224" type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" />
<param name="flashvars" value="autostart=true&controlbar=hide&image=intro6.jpg&file=intro6.mp4&repeat=always" />
<img src="intro6.jpg" width="480" height="224" />
</object>
</video>
And as you can see i do not have any controls, it's just a looping video that autoplays. This works great on desktop browsers, but not so much on Android and iOS.
So i need the controls to be visible on Android as it doesnt autoplay or loop.
And on iOS i need the video not to autoplay.
Is there a way to accomplish this with javascript? And keep in mind i don't know much javascript.
Thanks!

Probably the easiest and most practical way is to check the user agent to see if you're on Android.
if (navigator.userAgent.indexOf('Android') >=0) {
document.getElementById('myvideo').controls = true;
}
In general, user agent sniffing is "frowned upon". It's usually best to use feature detection, since some far future version of the Android browser might support autoplay. But mobile browsers aren't usually very good at telling you when they don't support the video/audio spec.
Another way to do it is to check for events. In FF/Chrome/IE9+, the event will fire a series of events, including: loadstart, progress, durationchange, etc... up to play and playing. In the Android browser (at least, the old-ish version that I have), the video will instead fire a stalled event. You could look for stalled and then enable the controls. You could remove them again when you get the 'play' event.
var video = document.getElementById('myvideo'), started = false;
if (video && video.addEventListener) { //in case of IE < 9
video.addEventListener('stalled', function() {
if (!started) video.controls = true;
}, false);
video.addEventListener('play', function() {
started = true;
video.controls = false;
}, false);
}
But there are other reasons why you might see that event, like a slow internet connection. So you'll still risk seeing the controls for a bit in a desktop browser until the video starts.
You don't need to worry about iOS. It won't autoplay, even if you want it to.

Related

html video tag is not able to preload thus not able to autoplay through WebComponents on iOS (Safari or Chrome), but it works on Desktop browsers

iOS version 14.4
Desired outcome:
video autoplays on page load
Video doesn't have an audio track, and I am muting it too.
I am able to get the video tag to work on iOS when I run it directly through static HTML, like
<video id="anshul-video" poster="..." src="..." playsinline="" webkit-playsinline autoplay="" preload="auto" loop="" muted="">
<source id="something_else" src="..." type="video/mp4">
</video>
BUT when I do it through Web Components, it doesn't work. Such as
export default class anshulCommonHeroFeatures extends HTMLElement {
connectedCallback() {
this.setHeroFeatures();
}
setHeroFeatures() {
const commonHeroFeaturesTemplate = document.createElement('template');
commonHeroFeaturesTemplate.innerHTML = `<video id="..." src="..." playsinline="" autoplay="" preload="auto" loop="" muted="">
<source id="something_else" src="..." type="video/mp4"
</video>`;
this.appendChild(commonHeroFeaturesTemplate.content.cloneNode(true));
}
}
window.customElements.define('anshul-common-hero-features', anshulCommonHeroFeatures);
The Web Component code works everywhere else. It works on Desktop browsers. It works on Android phone's Chrome. WebComponent page is only failing on iOS.
Any clue or suggestion is welcome.
I had the exact same issue. To overcome this, I checked for the video tags in the DOM of the webcomponent (after the appendChild), cloned each video node, and replaced the origin video tags with clones.
let videos = this.querySelectorAll('video');
videos.forEach(vid => {
vid.parentNode.insertBefore(vid.cloneNode(), vid);
vid.parentNode.removeChild(vid);
});
This isn't ideal as it could break references to the older nodes, but at least it fixes the autoplay issue.

prevent video to download certain source on mobile

I'm building a webpage where I have several video, so I've exported 2 different media for each of them: one high quality to show on desktop and a lower quality one to show on mobile.
To do so I styled my video element like this:
<video autoplay muted loop playsinline id="video-1">
<source class="mob-hidden" src="video-1.mp4" type="video/mp4">
<source class="des-hidden" src="video-1-low.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
where mob-hidden and des-hidden are css classes with a display: none; to prevent them to appear in mobile or desktop.
The problem is that I noticed that when on mobile and desktop the page still downloads both video versions even if it uses just one, so I guess that using css classes is not enough.
Can you help understand how to prevent the webpage to download media that it's not going to use? so low-quality video when on desktop and high-quality videos when on mobile.
Thank you very much!
Try this:
<video controls>
<source src="the-sky-is-calling-large.mp4" media="screen and (min-width:800px)">
<source src="the-sky-is-calling-large.webm" media="screen and (min-width:800px)">
<source src="the-sky-is-calling-small.mp4" media="screen and (max-width:799px)">
<source src="the-sky-is-calling-small.webm" media="screen and (max-width:799px)">
</video>
I can see 3 potential approaches here
Checking width of the page in CSS
Since your video have two differences classes , you could code something like this
.des-hidden{
display: none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
.des-hidden{
display:none
}
.mob-hidden{
display: block;
}
}
BUT you'll have to change your HTML to something like this, to make it work
<video autoplay muted loop playsinline id="video-1" class="mob-hidden">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<video autoplay muted loop playsinline id="video-2" class="des-hidden">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Checking width of the page in JS
You could use something like this changing your classes for IDs:
window.addEventListener("resize", function(event) {
if (document.body.clientWidth <= 768) {
document.getElementById("des-hidden").style.display = "none";
document.getElementById("mob-hidden").style.display = "block";
} else {
document.getElementById("des-hidden").style.display = "block";
document.getElementById("des-hidden").style.display = "none";
}
});
Checking device in Back-End
Depending on your backEnd, if you have one (PHP, Node.Js) , you could check for the user-agent, and decide to display one video or the other
You can look at this if you use PHP :
Simplest way to detect a mobile device in PHP
Or if you use NodeJs :
Identify if the request is coming from mobile or not
More details
On recent browser, using the display:none CSS property will skip completely the file loading, meaning the video won't even get requested by the browser, saving both loading time and data usage
(See Does “display:none” prevent an image from loading?
Using a back-end solution could help to be sure the right video will receive the right video, preventing useless loading time, but it'll be harder for your page to adapt if the width of the page changes after the loading
So I recommend using the CSS option if you don't want to deal with Ajax or nodeJs asynchronsism

Display Video Inline

I have video embedded in a webpage.
I would like to let it play inline on the iOS and not expanding to full screen when clicking on the play button.
I've tried
adding webkit-playsinline
<video width="400" controls webkit-playsinline>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I've tried added in JSFiddle <-- Please View it use your Phone/Tablet
Any hints ?
You have to set the following in Obj C as well.
webview.allowsInlineMediaPlayback = YES;
Your existing attribute is right like below.
<video id="player" width="480" height="320" webkit-playsinline>
Other - Use HTML5 FullScreen API
http://www.sitepoint.com/use-html5-full-screen-api/
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Below are the Webkit Fullscreen properties to play around.
document.webkitCurrentFullScreenElement
document.webkitCancelFullScreen
document.webkitFullScreenKeyboardInputAllowed
document.webkitIsFullScreen

How to detect if user clicked Done in a video in iOS

When watching videos on iOS fullscreen and clicking 'Done' in my video I go back to the page to a smaller state of the video but I want to trigger a function.
I've tried
myPlayer.on('ended', function() { });
myPlayer.addEventListener('ended', function(){ });
However, these detect if the video is ended and not when the user clicks 'Done' in the middle of the video.
Is there a method that can detect if the video leaves the fullscreen state?
You could have a look at this using JQuery, It will detect if a video has come from fullscreen
// Entering fullscreen mode
$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
var event = state ? 'FullScreen' : 'NotFullScreen';
// Now do something interesting
if (event == 'NotFullScreen')
{
hideVideo();
}
});
function hideVideo()
{
// You could also try this $('video').hide();
$('video').toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video width="950" height="534" controls="controls" preload="preload" poster="http://www.globalonenessproject.org/sites/default/files/player-still/laugh-clown-laugh-alt6_0.jpg">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="http://media.globalonenessproject.org/videos/mp4/laugh-clown-laugh-sd.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="http://media.globalonenessproject.org/videos/webm/laugh-clown-laugh-sd.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="http://media.globalonenessproject.org/videos/ogg/laugh-clown-laugh-sd.ogv" />
</video>

Making a video to play as my websites favicon

This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me

Categories