Show videos with video tag

ionic-v1
1

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:

2

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.

3

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 ?