androidangularjsionic-frameworkvideogular

How to autoplay videos on Android using videogular and ionic v1?


In my project I am attempting to autoplay videos on Android devices. Currently, I have the following:

        <videogular vg-player-ready="ionicVideoCtrl.onPlayerReady($API)"
                    vg-complete="ionicVideoCtrl.onCompleteVideo()"
                    vg-theme="ionicVideoCtrl.config.theme"
                    vg-autoplay="ionicVideoCtrl.config.autoPlay">
            <vg-media vg-src="ionicVideoCtrl.config.sources"
                      vg-youtube="{{ ionicVideoCtrl.config.youTubeOptions }}"
                      vg-native-controls="ionicVideoCtrl.isYouTube">
            </vg-media>

            <vg-buffering data-ng-if="!ionicVideoCtrl.config.isYouTube"></vg-buffering>
            <vg-controls data-ng-if="!ionicVideoCtrl.config.isYouTube"
                         vg-autohide="ionicVideoCtrl.config.autoHide"
                         vg-autohide-time="ionicVideoCtrl.config.autoHideTime">
                <vg-play-pause-button></vg-play-pause-button>
                <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
                <vg-scrub-bar>
                    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                </vg-scrub-bar>
                <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
                <vg-volume>
                    <vg-mute-button></vg-mute-button>
                    <vg-volume-bar></vg-volume-bar>
                </vg-volume>
                <vg-fullscreen-button></vg-fullscreen-button>
            </vg-controls>

            <vg-poster data-ng-if="!ionicVideoCtrl.config.isYouTube || ionicVideoCtrl.isLoadingVideo"
                       vg-url='ionicVideoCtrl.config.plugins.poster'></vg-poster>

            <!--<vg-analytics vg-track-info="ionicVideoCtrl.config.plugins.analytics"></vg-analytics>-->

            <vg-overlay-play data-ng-if="!ionicVideoCtrl.config.isYouTube"></vg-overlay-play>
        </videogular>

Where ionicVideoCtrl.config.autoPlay = true and ionicVideoCtrl.config.youTubeOptions = 'rel=0;showinfo=0;autoplay=1;'

This works fine in my browser but not on Android devices. Is this something limited by the OS? Is there a workaround?


Solution

  • I have never used Videogular, but Ionic applications are just plain HTML5 web apps.

    Therefore, the rules for any other web page apply here.

    Please see the official documentation that states that

    Playback will start automatically for a video element once it comes into view if both autoplay and muted are set, and playback of muted videos can be initiated pragmatically with play(). Previously, playback on mobile had to be initiated by a user gesture, regardless of the muted state.

    The following code can be also found in the documentation:

    <video autoplay muted>
        <source src="video.webm" type="video/webm" />
        <source src="video.mp4" type="video/mp4" />
    </video>
    

    So yes, it is indeed a OS limitation.