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.
Related
I'm trying to add autoplaying music to a tumblr theme, but Chrome and Firefox both prevent autoplaying audio by default. How do I circumvent this?
Currently, to hear the autoplaying music, a user would have to change their personal browser settings to allow autoplay. Is there a workaround I can use to make the page play audio even if they have sound set to automatic (in Chrome) or autoplay blocked (in Firefox)?
Tumblr themes allow HTML, CSS, and Javascript, so I'd be happy for a solution using any of those. Ideally I would like my autoplay solution to allow multiple songs in a playlist, if possible.
I tried adding an invisible iframe, but that didn't work; I'm not sure whether it was the third-party audio player I'm using, or just that the iframe technique doesn't work at all anymore.
You can't circumvent auto-play from being blocked. There has to be some user interaction before the audio can play. This is the same for both HTML <audio> element as well as the web-audio API's audioContext
There's some reading about this on MDN Autoplay guide for media and Web Audio's API
You can try to play the audio on javascript onload.
Example:
HTML:
<audio controls id="horseAudio">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
JavaScript:
window.onload = function (){
document.getElementById("horseAudio").play();
}
I do not think there is a way around autoplay being deactivated until there is user interaction. I was working on a project with similar problem and I decided to put a "begin" button on it to direct the user to click it. By clicking it (click event listener), they would have satisfied an interaction and it would then play my animations and audio.
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
I'm developing this app for a local radio as part of community outreach type deal for my company (placement student) i kinda threw myself in at the deep end and decided to go with building this website -> app with only a tiny knowledge of the technologies i'm using however it's working quite well at the moment i'm just having a problem with the following.
So basically i'm trying to stream some audio using html audio tags. This works in my browser but not in my emulator (ripple emulator, nexus 4) nor on my android phone (HTC One).
Technologies - HTML5, CSS, Jquery Mobile and Phonegap Build.
I feel like i probably have to do something with Javascript.
<audio controls>
<source src="http://195.10.228.6:8035/canal.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Thanks for any help!
EDIT: to clarify i am able to see the audio player and also interact with it, it either just won't play sound or it doesn't play the stream not entirely sure.
<audio id="stream" preload='none'>
<source src="audio source" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
play!
<script>
var stream = document.getElementById('stream'),
ctrl = document.getElementById('audioControl');
ctrl.onclick = function () {
// Update the Button
var pause = ctrl.innerHTML === 'pause!';
ctrl.innerHTML = pause ? 'play!' : 'pause!';
// Update the Audio
var method = pause ? 'pause' : 'play';
stream[method]();
// Prevent Default Action
return false;
};
</script>
This code fixes most things it will allow you to play through your phone and also only has a play/pause link. you can do any styling you wish later on.
problems-takes about 10seconds prior to clicking play to load ~ atleast for my stream anyways for local files probably alot easier
You need to include more sound formats, as the MP3 isn't probably supported. According to http://html5please.com/#audio you have to include at least OGG and AAC formats.
Also beware that Opera Mini does not support the audio tag at all. You should include a polyfill, some were mentioned in the first link (http://html5please.com/#audio).
Have you looked into adding your external site to the config.xml whitelist?
Documentation for this is available:
http://docs.phonegap.com/en/2.7.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide
Ive implemented an instance of mediaelement.js for my videos which are all in mp4 format. I cant get it to work properly, however. First here is how I have implemented it:
Video:
<video src="/video.mp4" type="video/mp4" controls preload="none" width="500" height="282"></video>
Place at the end of the body, right after including mediaelement.js itself:
$("video").mediaelementplayer({
mode:"shim",
startVolume:0.3
});
The problems I am having are:
In IE the silverlight player wont play the media. It looks like it is being loaded, since the videos length is being shown.
When mode is set to "shim," Chrome doesnt allow fullscreen.
When mode is set to "shim," iPhone users are met by a dead link.
When mode isnt set to "shim," iPhone users are met by the player that wont play the video.
Videos are .mp4 and in h.264 encoding.
Thanks in advance for any attempt to help.
The problem was that the videos had been interlaced by the media encoder. IE+iPhones dont play those.
The fullscreen was a problem with the flashplayer and only happened in some versions of Chrome.
I assume there might be a HTML5 or some JS that can be used to play sound?
Before you mark this as duplicate, this question is old, so I believe outdated:
Play sound in iPhone web app with Javascript?
Maybe you could use a JS event, send a event to your UIWebView delegate and then play a sound with in objective-c ?
Best solution I think ^^
For a solution in HTML5 I have no idea.
You could take a look at
Sound effects in JavaScript / HTML5
But I'm not sure this solution would work on all device. It depends if you need to play the sound "often" or not.
The current version of mobile Safari (iOS 5.0.1) has poor audio HTML5 support. The play method of an Audio object will work sporadically, but only as the result of direct user click and it will not preload (expect a random delay on first play.) This makes it impractical to use audio in your iPhone web applications at this time.
If noticed some issues in Chrome but otherwise seems to work in other major browsers.
HTML:
<audio id="sound_example" title="Sample" autobuffer>
<source src="sample1.wav" type="audio/x-wav">
<source src="sample2.ogg" type="application/ogg">
<source src="sample3.mp3" type="audio/mpeg">
</audio>
Javascript:
var playThis = document.getElementById("sound_example");
if (!playThis.paused) {
playThis.pause();
playThis.currentTime = 0.0;
}
tmpAudio.play();
Obviously you'll need to provide your own wav, ogg, or mp3 to try this yourself. The check for it being paused is there so if the condition is met, it will reset before playing it again.
If you'd like to skip the audio tag altogether you can go with this:
var sound_example = new Audio("sample3.mp3");
sound_example.play();
There are some minor pros and cons to both approaches but if you're needs are straight-forward then either should suffice.