html视频无法在iPhone Safari游戏中播放

Question

我在后端有一个带有asp.net网页的网站，在客户端有一个带有jQuery和bootstrap的javascript。我有一个严重的问题，在Safari和iPad设备上播放视频。大多数视频都在自举旋转木马内。 这是第

页中视频的示例

<div class="resp col-xs-12 col-sm-4 col-lg-3">
        <div class="mob-xs-1x1 mob-hover-style mob-video-style">
            <div class="video- mob" data-autoplay="@IsAutoplay.ToString().ToLower()" data-poster-desktop="@Html.SomeUrl(Image)" data-poster-mobile="@Html. SomeUrl (Image)"
                 data-poster-tablet="@Html. SomeUrl (Image)" data-disable-sound="@DisableSound.ToString().ToLower()">
                <video loop="true" preload="auto " playsinline="playsinline">
                    <source src="@Html. SomeUrl(SomeUrl)"></source>
                </video>
                <div class="poster" style="background: url('@Html. SomeUrl(Image)') no-repeat center center; background-size: cover; display: none;">
                    <img src="" />
                </div>
                <div class="container-wrap">
                    <div alt="loading" class="loading" style="display: none;"></div>
                    <div class="container-flex">
                        @if (ShowButtons)
                        {
                            <div class="controls">
                                <div class="play" data-play="@Html. SomeUrl("/icons/misc/video-playerOn.svg")" data-stop="@Html.SomeUrl("/icons/misc/video-playerOff.svg")">
                                    <img src="@Html.SomeUrl("/icons/misc/video-playerOn.svg")" />
                                </div>
                                <div class="sound" data-on="@Html.SomeUrl("/icons/misc/volumeOn.svg")" data-off="@Html.SomeUrl("/icons/misc/volumeOff.svg")">
                                    <img src="@Html.SomeUrl("/icons/misc/volumeOff.svg")" />
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>

在客户端，我们有多个引导轮播，其中正在播放这些视频。 所有这些轮播都在jQuery小部件中，如

$.widget('sm.someWidget, {


    _create: function () {
        var widget = this;            
        var div = this.element;
        widget.options.isMobile = window.matchMedia("screen and (max-width: 767px)").matches;
        widget.options.isTablet = window.matchMedia("screen and (min-width: 768px) and (max-width:999px)").matches;
        widget.options.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        widget.options.disableSound = $(div).attr("data-disable-sound") === "true";

        if (widget.options.iOS) {
            widget._hideSound();
        }
        widget._setPoster();
        widget._setSrc();           
        widget.options.isAutoplay = div.data('autoplay');
        widget.options.canPlay = false;
        var playImage = widget._getPlayImage();
        playImage.unbind('click');
        playImage.bind('click', function(){
            if (widget.options.isPlaying) {
                console.log('stop playing video');
                widget._stop();
            } else {
                widget._play();
            }
        });            

        var soundImage = widget._getSoundImage();
        soundImage.unbind('click');
        soundImage.bind('click', function(){
            widget._sound(!widget.options.soundOn);
        });

        var videoElement = widget._getVideoElement();
        videoElement.unbind('canplay');
        videoElement.bind('canplay', function(e){
            widget._getLoadingIcon().hide();
            if (widget.options.isPlaying) {
                widget._getPosterElement().hide();
            }
            widget.options.canPlay = true;
        });

        var source = videoElement.find('source');

        source.bind('error', function (e) {
            widget._getPlayControl().hide();
            widget._getSoundControl().hide();
            widget._getLoadingIcon().hide();
        });

        if (widget.options.isAutoplay && !widget.options.isMobile && !widget.options.isTablet && $(div).is(":visible")) {
            $(widget.element).show();
            setTimeout(function () {      
               widget._play();
            }, 150);
        } else {
        }
        widget._setSoundIcon('off');

        if(widget.options.disableSound) {
            widget._sound(true);
        } else {
            widget._sound(false);
        }

        $(widget.element).show();

        widget._getVideoElementNative().addEventListener('ended', function(){
            widget._stop();
        } , false);
        if(widget.isPlaying){
        widget._getVideoElementNative().addEventListener('pause', function() {
            widget._stop();
        }, false);}
        widget._getVideoElementNative().addEventListener('webkitendfullscreen', function() {                     widget._stop();
        }, false);
    },

我的问题是，在iPhone和iPad设备上，视频根本就不想播放。当我按下我的自定义播放按钮时，它会在停止按钮上更改，但就是这样，视频无法播放。你能帮助我吗？在Chrome控制台上我有一个错误 未捕获（在promise中）DOMException：play（）请求被pause（）调用中断。