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)
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)
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 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 ?
I'm creating a web page using HTML5 in order to have a mp4 video on it, I already accomplished this but, I trying to add some functionalities like autoplay, autobuffer and loop using this code
<video id="video" width="320" height="240" src="http://.../TCLAST.mp4" controls autobuffer autoplay loop>
But nothing so far, one more thing I want to display this page on the Motorola XOOM. I have used different browsers like dolphin, skyfire, firefox and the default browser.
You can try videojs ( http://videojs.com/ ) and play the video on DOMReady. Using the video JS API. This will also give you the benefit of being iDevice compatable.
The XOOM in its current form is very picky about video. Have you verified that the video you want to play will play in the native player?
For more information, look here:
http://forum.xda-developers.com/showthread.php?t=1026570&highlight=video
http://forum.xda-developers.com/showthread.php?t=1021461&highlight=video
Here the Demo
http://jsfiddle.net/dineshk/fvnr0zex/2/
This Will work when the video tag append using Javascript.
Here the Javascript code
var newHtml = '<video width="100%" height="30%" autoplay controls id="myVideos" src="https://dev.ocutagsnap.com:8080/PearsonVideos/videos/tumb10.mp4" ></video>';
$("#newone").append(newHtml);