iOS的视频自动播放在应用程序中不起作用

Posted 2023-02-23

【中文标题】iOS的视频自动播放在应用程序中不起作用

【英文标题】：Video autoplay for iOS not working in app

【发布时间】：2014-06-05 10:20:37

【问题描述】：

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

我的 html：

<videogular vg- 
vg- 
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)
);
)

【参考方案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>

【参考方案2】：

您不能在移动设备上自动播放，操作系统默认禁用它。

【讨论】：

那facebook是怎么做的

在任何时候，您必须在任何地方点击/单击，他们会利用该事件来播放视频。这是几乎所有浏览器的文档规范：您不能自动播放视频以避免带宽消耗，必须是用户必须允许下载。

好吧，我不知何故设法玩了它，我不知道它到底是什么，因为我做了几件事，但添加 autoplay="autoplay" 是我尝试的最后一件事

【参考方案3】：

我设法让它工作，但我不知道它是如何工作的。我尝试的最后一件事是把 autoplay="autoplay" 放进去。

<videogular id="intro-video" vg- 
 vg- 
 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>