See this pen: https://codepen.io/keithpickering/pen/qGyvwp
On the left is a "Boomerang", which is generated with our iOS app before being uploaded to S3. The other two videos are non-boomerangs also sent from the same app.
If you open this pen in any desktop browser and most mobile browsers, both videos play perfectly fine. However, in Chrome for Android, the Boomerang video skips around and generally just doesn't work properly.
Boomerangs are generated by taking a few seconds of video, then using AVKit to copy the video, reverse it, add the reversed version to the end, and loop the whole thing as necessary to reach a >=4 second duration.
I think this is some kind of encoding issue, but I'm not sure how else to test. What should I look for in the metadata/codec info within these files to further debug? If it is an encoding issue, is there any kind of third-party video player that might work better than the native one? All of our Boomerangs are generated the same way, so we can't go back and reencode them all.
Posting the code from the pen because Stack Overflow is making me:
<div class="col">
<h2>Boomerang</h2>
<video class="image-container video-container" autoplay loop muted playsinline><source src="https://queso-test.s3.us-west-2.amazonaws.com/J8UA23OSOFSE2E5L.mp4" type="video/mp4"></video>
</div>
<div class="col">
<h2>Regular Video</h2>
<video class="image-container video-container" autoplay loop muted playsinline><source src="https://queso-test.s3.us-west-2.amazonaws.com/5T7Z9GIG5SPYOX03.mp4"></video>
</div>
Related
I created a very new Cordova (6.4.0) project， placed a html5 video tag in the html body. Running the project for iOS, it works well. But for Android (6.0.0), the video plays without image UNTIL the zoom button in lower right corner is clicked.
White screen when playing the video for Android
Here is the html:
<body>
<video controls="controls" src="http://url/somemovie.MOV"></video>
<script type="text/javascript" src="cordova.js"></script>
</body>
If you mean that your video doesn't auto-play until you click on something, you may be encountering a deliberate limitation Google inserted into their mobile Chrome browser, which stops videos from auto-playing without user interaction. The reasoning behind this is because on mobile devices, bandwidth may result in charges to the user. (Hopefully they'll change their minds in future.)
However, there is a workaround for this, where you can still auto-play a video as long as it is muted by using the autoplay and muted properties. Example:
<video autoplay loop muted poster="/app/img/videos/timeapps.jpg">
<source src="/app/img/videos/timeapps.mp4" />
</video>
In the example above, I also have a poster image to display while the video content is first loaded.
I found a solution. Set the video full screen mode when it's played for android.
if (_IsAndroid()){
video = attElement.querySelector('.video');
video.src = filepath;
video.webkitRequestFullscreen();
//video.onclick = function(){document.webkitExitFullscreen();}
}
Problem:
The videos are placed in my site: http://dege.cloud/ (click on one of the pictures)
When I load the page on my desktop or on firefox mobile everything is fine.
When the same page is loaded on chrome for android the video is black without controls, the videos don't have audio, so I don't know if it plays.
Expected results:
The videos should be playable, hml5 video tag doesn't start automatically on mobile, but that's not a problem.
Analysis:
The Content-Type of the videos are correct and inspecting the console on the device don't provide errors.
I gave webm and mp4 version of the videos (ripped from http://giphy.com/ ).
The code for the video is this:
<video autoplay muted loop class="img-responsive img-centered">
<source src="img/portfolio/campominato-video.webm" type="video/webm" class="img-responsive img-centered">
<source src="img/portfolio/campominato-video.mp4" type="video/mp4" class="img-responsive img-centered">
<img src="img/portfolio/campominato-screen.png" class="img-responsive img-centered">
</video>
jsfiddle of the problem in action:
https://jsfiddle.net/Dege/1es4516p/
From what I can tell, the problem is the expectation that it would autoplay; while chrome Android 53 will autoplay muted videos, the current default version (51) won't.
In any case, if you add the controls attribute to the video element and press play, the video correctly plays, which confirms it is not an encoding issue.
(FWIW, the jsfiddle has 3 slashes in the http scheme used to load the videos; that's not the issue, but you might want to fix it nevertheless)
I'm trying to get something related to HTML5 videos working using Angular2 inside Cordova.
So far, this is what I achieved:
<video autoplay="true" loop="true" preload="auto" controls width=300 height=300 webkit-playsinline>
<source [src]="video.url" type="video/quicktime">
</video>
My video source is loaded from the network, and filled in correctly (the video object is correctly filled with a valid url (it works on my native ios app).
The only thing I can see displayed is the default poster, I can't play the video.
Did anyone managed to make this work ?
(I am deploying on an Android)
I have a landing page that has a few sections on it. Each section has a button that when clicked, I would like a video to pop-up and play in a modal-type window.
I have a few questions based on all of this so far.
The videos are handed to me in .m4v format, which I'm handling through html5 as:
<video id="delivervideo" width="100%" height="100%" controls>
<source src="#Url.Content("~/Content/videos/DeliverSection.m4v")" type="video/mp4">
Your browser does not support the video tag.
</video>
This is actually embedded in a Bootstrap Modal, and looks quite terrible on any non-PC device (appears on the top of the screen and cut-off).
When I start playing the video, if I skip ahead using the built-in controls, the video simply stops. I am unable to start the video again unless I refresh the page and start the video over.
So my questions are sort of broad here, but they are essentially:
When my graphics team is handing me videos, what format(s) should I request so the video works on iOS, Android, Chrome, and IE? Is there a couple of formats I should support? We have a lot of software to be able to change the format of the videos, just unsure on what formats to use
If I'd like to continue opening the video in a pop-up modal-type window, is there a better solution to this than Bootstrap? Something someone here has experience with that works nicely?
Has anyone else experienced issues with the built-in html5 <video> tag controls, where skipping ahead/rewinding causes play-back issues?
I can share the page to someone through PMs if they are willing to take a look, but really nothing out of the ordinary. Just a simple <video> tag supporting mp4 type, while the video is in .m4v format. It only seems to work on Chrome so far, so not very useful to mobile or tablets.
Note, I am using ASP/MVC and the website is hosted in Microsoft Windows Azure as a Website, not a VM where I have control over IIS.
I have a website with a big video in the background and I used HTML5 video for it. It does all I want on desktops, I can't make it work on tablets though (don't need it on mobiles) - instead of a video I see a black background only.
Code below:
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src="http://link/vid.mp4" type="video/mp4"/>
<source src="http://link/vid.ogv" type="video/ogg"/>
<source src="http://link/vid.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
Is it caused by the autoplay option? If so, is there any workaround?
Thanks,
S.
On most mobile browsers (including tablets - definitely iPad), autoplay will not work. The browser won't download any of the video file, not the first frame or even the metadata, until there's some kind of user interaction event - typically either a click or a touch.
The first thing you can do to alleviate the situation is to set a poster attribute on the video element, which is the URL to a poster image. That image should be visible right away in place of your video. If you want to go the extra mile, you can set a background color on the body so the user will see that while they're waiting for the poster image to load.
Next, you can add a touch or click event listener anywhere you want in the document that starts the video playing as soon as the user interacts with your web page.