I am working with the Ionic-Framework and I am using the Videogular plugin to play videos. But when I emulate it on the iOS it does not autoplay, while it does on desktop.
My HTML:
<videogular vg-width="config.width"
vg-height="config.height"
vg-theme="config.theme.url"
vg-autoplay="config.autoPlay"
vg-stretch="config.stretch.value"
vg-responsive="config.responsive">
<video class='videoPlayer' controls preload='none'>
<source src='assets/videos/level1.mp4' type='video/mp4'>
<source src='assets/videos/level1.ogv' type='video/ogg'>
</video>
<vg-overlay-play>Test</vg-overlay-play>
</videogular>
Modules:
angular.module('starter', [
'ionic',
'starter.controllers',
'starter.services',
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.buffering",
"com.2fdevs.videogular.plugins.poster"
])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
});
})
You can't autoplay on mobile devices, it is disabled by default by the OS.
I managed to get it to work but I don't exactly know how it worked. The last thing I tried was put autoplay="autoplay" in.
<videogular id="intro-video" vg-width="config.width"
vg-height="config.height"
vg-theme="config.theme.url"
vg-autoplay="config.autoPlay"
vg-stretch="config.stretch.value"
vg-responsive="true">
<video class='videoPlayer' autoplay='autoplay' webkit-playsinline>
<source src='assets/videos/level1.mp4' type='video/mp4'>
<source src='assets/videos/level1.ogv' type='video/ogg'>
</video>
</videogular>
You should use vg-autoplay="true" in videogular tag:
<videogular vg-autoplay="true">
Full Example:
<div class="videogular-container">
<videogular vg-player-ready="onPlayerReady()" vg-complete="onCompleteVideo()" vg-theme="config.theme.url" vg-autoplay="true">
<vg-video vg-src="config.sources" vg-tracks="config.tracks" vg-preload="config.preload"></vg-video>
<vg-controls vg-autohide="config.plugins.controls.autoHide" vg-autohide-time="config.plugins.controls.autoHideTime">
<vg-play-pause-button></vg-play-pause-button>
<vg-timedisplay>{{ currentTime | date:'mm:ss' }}</vg-timedisplay>
<vg-scrubBar>
<vg-scrubbarcurrenttime></vg-scrubbarcurrenttime>
</vg-scrubBar>
<vg-timedisplay>{{ timeLeft | date:'mm:ss' }}</vg-timedisplay>
<vg-volume>
<vg-mutebutton></vg-mutebutton>
<vg-volumebar></vg-volumebar>
</vg-volume>
<vg-fullscreenButton></vg-fullscreenButton>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-poster-image vg-url='config.plugins.poster'></vg-poster-image>
<div class="my-logo-layer" ng-show="API.currentState != 'play'">
<img src="http://www.videogular.com/img/videogular.png">
</div>
</videogular>
</div>