I'm currently working on a project with a lot of videos and this project needs to work on iphone.
But actually, the ios's video placeholder doesn't allows me to scroll in my page. I try to apply the webkit-playsinline attribute on my video tag but it doesn't work.
Is there a way - in full HTML5/JS - to prevent the native behavior of ios video player ?
I note that this problem is only on iphone (ios 7), not ipad.
Thanks !
Here my video tag :
<video vineresizer preload="auto" poster="{{vine.src_poster}}" loop webkit-playsinline="webkit-playsinline" controls="controls">
<source ng-src="{{ trustSrc(vine.src_video) }}" type="video/mp4">
</video>
And my js :
var video = element[0];
video.addEventListener('contextmenu', function (e) {
e.preventDefault(); e.stopPropagation(); },
false);
if (video.hasAttribute('controls')) {
video.removeAttribute('controls');
}
I've been looking into this issue extensively as well.
Unfortunately, 'webkit-playsinline' only works in a UIWebView in a native app, and then only when a flag is set in the native code. See this question.
From Apple's docs it seems there is no way to prevent this default behavior, but you can still capture the 'ended' and 'paused' events from the native player as if it were simply an HTML5 player inline in the page. I.e. event listeners on 'ended' etc. should still work.
You can also get some state information from the native player: https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html
Overall, you can only interact with the native player in a very limited way, and no known overrides exist.
In iOS 10+
Apple will finally enable the attribute playsinline in all browsers on iOS 10, so this will work seamlessly:
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
You can reproduce the behavior by simulating the playback by skimming the video instead of actually .play()'ing it.
iphone-inline-video can take care of the playback and audio sync (if any), and it keeps the <video> working as it should.
Related
First, please consider apologies if the question is trivial. I tried to search but did not find a satisfactory answer.
I am trying to get the autoplay of html5 video working in android browsers. I read in other posts that autoplay for html5 videos is disabled in Android. However I am able to get it working for firefox and opera. I used javascript play(). But this does not work in the chrome and default android browser.
In chrome unless you touch(= click) the 'play' button the video will not play. So can this 'touch' or 'mouse click' event be virtually triggered on 'window load' so that autoplay works.
If yes can you please show the implementation of it?
Thanks.
In their infinite wisdom, Google has decided not to enable autoplay on Chrome for Android if the video is not muted. Their reasoning is apparently because it is resource/bandwith costly and "users" did not like it.
In other words: It will work on Chrome desktop versions and such, but when you have not added the keyword "muted" to the tag, it will not autoplay on an Android device.
<video id="player" class="player" controls autoplay muted>
Isn't that swell?
Read more here:
https://developers.google.com/web/updates/2016/07/autoplay
Could you not do something like this:
function playOnLoad() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
<body onload="playOnLoad();">
...
</body>
Got the code from here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Controlling_media_playback
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
this is my first question in stackoverflow so pardon me for mistakes.
I've been trying to create a simple CMS using videojs in which user could upload their video and customize their attributes (eg: autoplay, loop and controls).
When they change the attributes I will automatically recreate the whole tags and reinitialized it. I did this so it gave the correct preview especially on firefox since user will upload mp4 and firefox will give the "not supported" warning sign if I did not reinitialize it (videojs will automatically converts into flash).
Now the problem is when user checked the "autoplay" attributes because when I initialize the video it will automatically plays and I don't want that kind of behavior in the CMS (though I want that behavior in the published site).
I've been trying to pause the player once it was ready but it still plays.
My hypothesis is that the command to pause was fired before the command to play from the autoplay attributes.
This is the html tag used for this
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
And this is the one I used to initialize and pause the video
_V_(example_video_1).ready( function() {
var myplayer = this;
myplayer.pause();
});
Any idea? Help is greatly appreciated. Worst case if all else fails I could use different tags for the preview and published site (no autoplay for the preview). I create a fiddle for this : http://jsfiddle.net/F8JhL/2/
EDIT: I noticed that sometimes the pause event really works though not automatically (about 1 to 2 second after the video plays) but more often it doesn't work at all.
I find the same issue when using version 4.1.0 of videojs. When I upgrade to version 5.1.0 this conflict is missing.
You could download the latest version at https://github.com/videojs/video.js/releases
So I think this bug has been fix (but I can't find the commit revision for this fix).
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.
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.