I’m not a fan of videoangular myself either, I’d much prefer a simpler, more straight forward video player themed to match ionics look and feel (maybe a project today?)
But like I mentioned above, I’d recommend using a video service providers embed option just to keep a consistent look and feel
I’m experiencing this issue on an Android 4.1.2 device and I prefer not to use an external library like videoangular or an external video service provider.
Mike (@mhartington) said that the problem is the default video player in older Android browsers, but I created a simple test app based on the ionic start default project and found that removing the <link href="lib/ionic/css/ionic.css" rel="stylesheet"> makes the video tag show a much nicer player (see images below).
The code I’m using for the test video is:
<video id="video1" width="480" preload="metadata" controls webkit-playsinline>
<source type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
<source type="video/ogg" src="http://www.w3schools.com/html/mov_bbb.ogg"></source>
Your browser does not support HTML5 video.
</video>
I don’t really understand the reason, because I looked into ionic.css and couldn’t find anything relevant related to the video elements. Any idea?.
After some testing I’ve finally managed to fix the appearance of the player by creating it inside a local iframe.
I found issues adding the code of the video element (which is dynamic) into the iframe, because writing directly to the iframe.contentDocument (as suggested here) made the app crash in Android 4.1.2, but using a data URL worked. This is how the code looks:
var DATA_SRC_PREFIX = "data:text/html;charset=utf-8,";
var HTML5_PLAYER_DATA_CODE = '<html><head></head><body>' +
'<video poster="{{poster}}" preload="metadata" controls webkit-playsinline>' +
'<source ng-repeat="src in playerSrcList track by $index" ng-src="{{trustResourceUrl(src.url)}}" type="{{src.format}}">' +
'Your browser doesn\'t support HTML5 video.' +
'</video>' +
'</body></html>';
var compiledPlayer = $compile("<div>" + HTML5_PLAYER_DATA_CODE + "</div>")(scope);
$timeout(function(){ //Need timeout to wait to get the interpolated html code
scope.model.iFrameDataSrc = $sce.trustAsResourceUrl(
DATA_SRC_PREFIX + escape(compiledPlayer.html())
);
});
Anyway I still wonder how ionic.css affects the appearance of the video player.
I’ve been trying to use the code to solve the iframe loading problem, it but I simply can’t figure out how to use it correctly.
Any chance to make a Plunkr, so we can learn the correct way of using it?
EDIT: Sorry, it DOES needs $timeout… If its triggered without it, it will be too fast, and the DOM wont have been updated yet. See my plnkr in the post below for a working solution.
Hi mhartington,
I tried your example its working fine for your video url but when i am passing other YouTube url its not working.
Could not find where is the problem is any security with other videos.
The true reason the CSS is messed up in video and audio tags is that the styles in ionic’s _range.scss are leaking to the tag’s shadow DOM. input[type="range"] selector and its pseudo-selectors cause the messed styles…
Not just iOS, as the same is true in Android stock browser, and Chrome for Android, It doesn’t matter if its packaged in Cordova, Crosswalk or just viewed as regular html, the result is the same. Nice catch, lukasmlady.