Show videos with video tag

Hi evorybody,

i’m trying to show videos in my ionic app with the html video tag. My videos are in videos folder inside www folder.

Here is my HTML code :

<div class="aligner home-video modal transparent fullscreen-player" ng-click="closeModal()">
    <video src="{{videoSrc}}" class="centerme" controls="controls" autoplay></video>
</div>

And my controller code :

.controller('HelpCtrl', function($scope, $ionicModal) {

    $scope.videoSrc = '';
    $ionicModal.fromTemplateUrl('templates/help-video.html', {
        scope: $scope,
        animation: 'slide-in-up'
    })
    .then(function(modal) {
        $scope.modalVideo = modal;
    });

    $scope.showVideo = function() {
        $scope.videoSrc = 'videos/video.ogv';
        $scope.modalVideo.show();
    };

    $scope.closeModal = function() {
        $scope.modalVideo.hide().then(function() {
            $scope.videoSrc = '';
        });
    };
})

In my browser, all works fine. My video is launched inside my modal. But on Android, my modal is opened but the video doesn’t start. Why ?

Thanx for your help :slight_smile:

Ogg Theora (the .ogv format) isn’t supported on mobiles. http://caniuse.com/#feat=ogv Change the format of the video to something else… MP4 if you want cross platform compatibility, or maybe WebM if you’re just targeting Android.

Hi !

First thanx for your answer. When I’m trying with a mp4 video, my android application crashes and I return on Android’s home. Is-it normal ?