javascript - iOS 的视频自动播放无法在应用程序中运行

Question

我正在使用 Ionic-Framework 并使用 Videogular 插件播放视频。但是当我在 iOS 上模拟它时它不会自动播放，而在桌面上它会自动播放。

我的 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>

模块:

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)
});
})

Answer 1

你应该在 videogular 标签中使用 vg-autoplay="true":

<videogular vg-autoplay="true">

完整示例:

<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>