i'm running a react js app that works perfectly fine on laptop but on the iphone the videos won't play even if you click them.
here is the code used to display the videos. I have no error in the developer console of safari either when clicking the video.
<video className='video1' loop autoPlay controls="true" width='50%' height='50%' src='leadmagic.mp4' type='video/mp4'></video>
Add an event click listener on your video tag and in it something like
$(".video1").click(function()
{
this.start()
});
If it doesn't autoplay on your phone it's probably that it isn't available on phone (On Android, I've got the same problem) to avoid the use of mobile data without the user's agreement
Related
I have a .webm video that I am dynamically setting as the source for the video tag.
vidPlayer = document.getElementById("player");
vidPlayer.src = videoPath;
The corresponding HTML:
<body>
<video id="player" class="video-player"></video>
</body>
This is working perfectly on the web browser but when I view this on my mobile, I get a white screen.
I checked the elements tab in the developer tools if different HTML was getting rendered, but it wasn't.
However, in the network tab for chrome web, there is a call made to fetch the video but the same does not happen for chrome android.
I am running this code on localhost.
Can anybody tell me what I am doing wrong or why this is happening?
So, apparently, if your video does not have controls enabled, then for mobile browsers, the user must interact(tap or swipe on the screen) for the video to be visible on the screen.
With controls enabled the video is visible from the start.
I'm using a latest flowplayer, and i'ved created couple of buttons that provides video source from cdn. With the click event the player should load the video source dynamically. But for some reason flowplayer cant unload and load the source of video properly. Instead I get the following error
html5: Video file not found
function flow(source) {
jQuery("#flow").flowplayer().unload();
jQuery("#flow").flowplayer().load(source);
}
alternatively I've tried to re-init the flowplayer with every click, but sometime the initial video get loaded instead of the clicked video source. After couple of clicks the flowplayer also get stuck on loading screen.
http://jsfiddle.net/qAj8x/
If you are using chrome for this purpose then from here . Chrome and Flow Player dose not go well together.
Native fullscreen is supported in Chrome 15+, Safari 5.1+ and Firefox 14+ and others will use full browser window. In Firefox 9+ the fullscreen is disabled and needs to be manually enabled at about:config (full-screen-api.enabled;true).
Some Chrome versions have issues with playing MP4 content. Workaround: List a WEBM before the MP4 source and/or set preload="none" as video tag attribute.
Chrome gets stuck when trying to load the same video twice, even in two different tabs.
let's get down to the code:
I'm preparing the document with:
<video width="300" height="400" id="videoStage"></video><button onclick='video()'>Play video</button>
as for the JS function:
function video(){
var vid_url = "https://fbcdn-video-a.akamaihd.net/cfs-ak-ash4/v/82342/969/274169121921_63622.mp4?oh=99ef0d9285cbbd7adf8bc07a845dc0d1&oe=519E400F&__gda__=1369439362_83c7f900e92bdbaa201f49d35a7c144a";
stage = document.getElementById('videoStage');
stage.src = vid_url;
stage.play();
}
working code sample: http://jsbin.com/eviyel/1
this code works just fine and plays the video both on my desktop and my mobile device.
But(!) when the video() function is applied to document.ready - it only plays on my desktop and as for my mobile device it displays empty.
Any solution guys? 10x.
I found the answer myself:
Mobile browsers (such as chrome mobile and iOs's) must have a valid 'click' first to enable both video+audio playback.
Once that click as been achieved, the element that was used to play the video/audio is now playable.
You can now change the SRC of that element to play any new media source programmatically without having to click on the DOM once again.
Starting from iOS 10 autoplaying videos that are muted is allowed without user interaction:
https://webkit.org/blog/6784/new-video-policies-for-ios/
Android still seems to require user interaction, although it might be possible to use a touchend event from scrolling the page to start the video playback.
I'm trying to get HTML5 videos to play on mobile devices. They seem to run fine on the latest version of iOS, but I'm getting a lot of inconsistency with Android devices.
I'm using video.js and listening for a click on a thumbnail image, which in return replaces the element with a HTML5 video and plays it automatically. The following code flat out doesn't work on the Android emulator (clicking on a thumbnail does nothing). When I try it on my own Droid Razr, it begins to load the video and then the browser freezes up. This happens in the native browser and Chrome, which tells me it's something native to the device.
$(".video").live("click", function(e) {
e.preventDefault();
$(this).replaceWith("<video id='" + $(this).data("video-id") + "' class='video-js' preoload='auto' width='100%' height='100%' poster='" + $(this).data("video-poster-url") + "'><source type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"' src='" + $(this).data("video-url") + "'></video>");
video = _V_($(this));
video.ready(function() {
this.play();
this.requestFullScreen();
});
});
The HTML ends up being:
<video id='fv3530' class='video-js' preoload='auto' width='100%' height='100%' poster='/posters/fv3530.jpg'>
<source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" src='/videos/fv3530.mp4'>
</video>
Does anybody know why this would cause an Android device to totally freeze up, and what I can do to make videos run consistently on most Android devices?
Thanks!
Please se this question: HTML5 <video> element on Android
Apparently, there is a possibility to use HTML5 videos with android, according to http://developer.android.com/about/versions/android-2.0-highlights.html
But there are some strict parameteres in order to make this work (see checked response to the question).
In your case, It is not easy to handle events with the emulator, especially html5 etc, so you should allways use a real device for testing (really recommanded). In which concerns your phone, the possibly reason why it is not working is that yu are using a non supported video codec.
Remove the type attribute from the source declaration. This usually causes issues with Android, older versions especially.
Your source declaration should simply be:
<source src='/videos/fv3530.mp4'>
I have a small site which has a working HTML5 video on Android (just tested it on my HTC Desire running Android 2.2).
I have an HTML5 web-app that has sound effects. I'm trying to get these effects working in iOS5 and can't for the life of me.
Wondering if anyone has any work-arounds to get JS control of an HTML5 audio/video control in iOS5.
Or even a way to control multiple audio files with one click. As it stands right now, if I have 10 sound effects, I'd need 10 user clicks to get control of all of them, which is absurd!
Absurb, but you have to see it from iPhone or any mobile phone's point of view. It is a mobile phone going over a cellular network with bandwidth limitations, which many people know about from the recent Sprint commercial. They do not want users going over their bandwidth limit because some site is sending their phone a large amount of data without them taking action themselves.
The following is an excerpt from the official Safari Developer Library with more details.
User Control of Downloads Over Cellular Networks
In Safari on iOS (for all devices, including iPad), where the user may
be on a cellular network and be charged per data unit, preload and
autoplay are disabled. No data is loaded until the user initiates it.
This means the JavaScript play() and load() methods are also inactive
until the user initiates playback, unless the play() or load() method
is triggered by user action. In other words, a user-initiated Play
button works, but an onLoad="play()" event does not.
This plays the movie: <input type="button" value="Play" onClick="document.myMovie.play()">
This does nothing on iOS: <body onLoad="document.myMovie.play()">
Due to Apple, they have restricted the auto-play features to prevent cell data charges. In xcode4 i added a workaround though. In your "webViewDidFinishLoad" Send a javascript call to auto play the video and it works. I tried this in the html file with regular javascript but it did not work. Doing it through webViewDidFinishLoad did the trick though. In this example i want to auto play the video on my index.html page. I have a javascript function on that page called startVideo().
- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSURLRequest* request = [webView request];
NSString *page = [request.URL lastPathComponent];
if ([page isEqualToString:#"index.html"]){
NSString *js = #"startVideo();";
[myWebMain stringByEvaluatingJavaScriptFromString:js];
}
}
And here's my javascript function:
<script>
function startVideo(){
var pElement3 = document.getElementById('myVideo');
pElement3.play();
}
</script>
And here's the html in case you're new to html video
<video id="myVideo" poster="index_poster.png" width="1024" height="768" xcontrols autoplay="autoplay">
<source src="flow.m4v" type="video/mp4"/>
browser not supports the video
</video>
Have you tried something like this??
function clickedOnce(){
$('audio').each(function(){
this.play();
});
}