To enable the autoplay of a video we just add the "autoplay" attribute to the video tag.
This doesn't work on mobile devices and browsers like Google Chrome, iPad, iPhone, the "play" method will not work until there is no user interaction with the touchscreen.
But in this link or this link, with a custom JavaScript player, they bypass this block, and the video autoplay on iPhone, iPad, Webkit Browsers and all Mobile Devices without user interaction.
How can i do it myself?
if at the load of the page i simulate touch events this might unlock the video "play" method?
i cloud load a video url only with canvas? without the video tag?
Please help and explain me.
There's a library which uses canvas to autoplay inline video on mobile. The downside is that there is no audio, since canvas originally wasn't intended for that.
The library basically loads all the frames and then shows them to you in a sequence. This brings along some limitations regarding the length of the video.
Beats gifs tho....
https://github.com/gka/canvid
Related
My autoplay option of Cloudflare Stream tag is working perfectly on Safari, Chrome and desktop browsers but is not working on IOS.
Is there a way to start the video? Why this happens?
Videos on iOS will not start playing unless there is a user action on it.
If you want to autoplay a video in iOS, you have to play it as MUTED.
Also this workaround will not work --> autoplaying as muted, then unmute programatically as soon as the video starts.
One note though: autoplay on iOS will not work at all if power saving mode is ON.
I'm building a mobile site in which in embed some youtube videos with the IFrame player API (https://developers.google.com/youtube/iframe_api_reference).
Basically, I need to start this video after the user clicks a custom play button. This button triggers the player.playVideo() on the loaded youtube iframe to play the video. This works fine on the standard android and iphone browser (video starts playing fullscreen). However in Google Chrome's mobile browser (android and ios) I get a second play button over the video after my first click, thus making me click twice to play the video.
Anyone know a workaround for this?
Theoretically the autoplay is disabled on Safari and Google Chrome for Android . In my experience I never could avoid to show the second button with Youtube player API, even with an action triggered by user (the first click).
I'm looking to add some videos to my mobile webapp. For the best UX, I'd like to avoid having a simple static video-tag. (because its in an element which is webkit animated and video + webkit animations don't always play nicely together in my experience.)
Rather, I'd like to have an image (with a play icon on it) to "link" to the video. Mobile YouTube (as seen on iOS) have done this very nicely where when you click the image, the video seems to "pop" up to fullscreen and plays. How do they do this? Is it a link? A previously hidden video-tag? Some webkit-animation to do the "popping"?
I snooped around using Chrome Inspector (+user agent switcher to iphone4) but the videos don't play on the desktop browser, and the code overall looks quite complex..
Can you help?
What you can do is on-click of the video thumbnail, you can load the video url using the object/embed tags. In IOS, whenever a video starts playing it automatically plays it in fullscreen(feature of IOS itself)
I believe you can do something similar to this on certain browsers (e.g. WebKit.)
Is there a way to show the controls after a video has started playing. Basically, I'm playing a video with play(), and I want the controls to stay up for a few seconds. Currently (at least on my Android device), the controls fade once the video starts.
Toggling the controls attribute doesn't work, unfortunately.
HTML5 video on Android (iOS too) is not opened inline but in the native player (i.e. outside the browser), so the <video>-tag attributes have no control over what is going to happen in the player.
I don't know if it's possible to "hack" / set-up the native player so I guess you'll have to do research on that. I don't know of any way to remotely influence the behavior of the Android application unfortunately. In case you find out something it would be nice if you could let me know btw.
Also see a recent question of mine (which is rather discouraging unfortunately).
I am building a site where I have several <video> elements (looped animations) that act as part of my design (not as an actual video). This works quite well in desktop browsers, yet I am in trouble on mobile devices.When I display the site on Android or iOS devices (ie. mobile webkit) I will get the OS's video player appearance and the videos will open in some sort of popup when I click them. I do know that I can bypass the autoplay restrictions by doing sth like:
window.onload = function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
};
But this will again open the video(s) in a seperate window...
Does anyone know of a possibility to emulate / enable desktop-like behavior on mobile devices? Thanks!
EDIT:
Markup is basic <video>-syntax btw:
<video autoplay loop>
<source src="vid.mp4" type="video/mp4" />
<source src="vid.ogg" type="video/ogg" />
<source src="vid.webm" type="video/webm" />
</video>
Hmm, I'm not sure about Android but iOS devices can't run multiple video streams simultaneously:
Multiple Simultaneous Audio or Video Streams
Currently, all devices running iOS are limited to playback of a single
audio or video stream at any time. Playing more than one video—side by
side, partly overlapping, or completely overlaid—is not currently
supported on iOS devices. Playing multiple simultaneous audio streams
is also not supported. You can change the audio or video source
dynamically, however. See “Replacing a Media Source Sequentially” for
details.
No, Android or iOS devices (ie. mobile webkit) are not able to run video as you are wanting . Video will open in a default video player of device.
YouTube uses a mov or mp4 with ios to load the native look and feel for videos, or it links out to their app to play the video since it's installed on every ios device.
Why do you need windows.onload to bypass autoplay? If I remember correctly setting the preload tag to none
<video src="vid.mov" preload=”none”></video>
should work.
Also, have you tried using the Video For Everybody approach? With that should be able to get the video to play in the web page rather than by the phone's OS, that way I believe you can achieve the same effect on supported devices.
EDIT: In regards to j08691's answer, an alternative approach for iPhones could be to design a simple web viewer app for the site for iPhone which has a workaround for the no-multiple video playing problem.