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.
Related
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've been trying to solve this issue for days now, and I've Googled and researched as much as I can, but no answer has solved the problem yet.
I have put a video on a web page I'm working on using the HTML5 video tag. It works in all the desktop browsers I've tried (Firefox, Chrome, IE) and it has worked on 2 iPhones I've tried (iPhone 6 and iPhone 6s), but I can't get it to play for the life of me on my android devices (Samsung Galaxy S5 and Samsung Galaxy Note 8.0). The video player shows up on the page and allows me to press the Play button, but when I do it just sits for a minute or 2 and then pops up with a message saying "Sorry, unable to play video."
I have 3 different file types for the video (4 technically if you count mp4 and m4v as two different types) and they are mp4, webm, and ogg. The mp4 is encoded with H.264. I've tried converting them several times with a converter that specifies "types for specific devices, etc" just to see if I could get any different conversions to work.
This is the code I am using:
<video width="480" height="270" controls>
<source src="../pages/videos/video001.mp4">
<source src="../pages/videos/video001.m4v" type="video/mp4">
<source src="../pages/videos/video001.webm" type="video/webm">
<source src="../pages/videos/video001.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I've tried different aspect ratios and sizes. I've done the whole "turn your device off then back on," I've cleared out my cache and cookies data on my browser (trying to access via Chrome), and I've also tried to play it on the Samsung Galaxy native browser vs. chrome (the name is escaping me at the moment) and it didn't work on there either.
Any assistance is greatly appreciated. This is driving me insane!
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 ?