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)
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();}
}
Been trying to get local videos playing on an Android (4.4.2) device using Ionic.
The closest I can get is:
<video controls poster="img/video-stills/video.png">
<source src="videos/video.mp4" type="video/mp4" />
</video>
This shows the poster image, shows the controls and a play butt and then when clicking play it crashes the app.
I have tried every combination of type / video type etc but cannot get this working.
Any ideas? The videos are located in www/videos and have tried appending the android_assets link etc.
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 am trying to play my webm video on my android.
my code is:
<video width="290" height="517" autoplay loop>
<source src="/assets/videos/livematch.mp4" type="video/mp4;">
<source src="/assets/videos/livematch.webm" type="video/webm;">
</video>
I tried without semicolons as well ...type="video/mp4"...
When I open the page the placeholder of the video is black.
When I am trying to download the clip (press and hold on it) it actually saves the mp4.
How should i write the code so it will automatically recognise the device?
Hey I would try to remove the type attribute like showed in the first link I provided. Otherwise you can try to manually call video.play() like showed in the second link.
Playing HTML5 Videos in Browser -- What Works for Most Android Devices?
HTML5 <video> element on Android
Hi all.
I am making a dreamweaverCC mobile App. I have everything working perfectly through the phonegap build and I can get my .apk.
However the html 5 "video" tag dose not seem to be working correctly.
For instance , the following works correctly when linked to a movie on the internet, and I can play the video correctly and without a problem on my phone.
<video poster="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Teddy_bear_27.jpg/250px-Teddy_bear_27.jpg" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
However the local video file will display the place holder and even show the "controls" but it keeps showing a spining box as if "loading" but it never actually dose:
<video width="560" height="340" controls>
<source src="videos/broken_compas.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
</video>
So the question is : why is Android not picking up the embedded video ?
Remember , this is been packed through the DreamweaverCC and phone-gap for use on a mobile (.apk) file.
Both videos work fine on the dreamweaver "live" option.
I know the video is been packed due to the file size of the APK.
Is is a simple file refference path issue ?