play() onabort iphone safari

Posted 2023-02-22

【中文标题】play() onabort iphone safari

【英文标题】：

【发布时间】：2017-01-24 10:54:47

【问题描述】：

我有一个问题，我在两周内无法解决。我使用 jQuery ui Widgets 来呈现引导轮播。在那些轮播中，我渲染了高质量的视频。如果页面上有很多视频元素，标题中的视频会停止加载并引发 onAbort 事件。我的播放功能看起来像

play: function()             
        var widget = this;
        var videoElement = widget._getVideoElement();
         if(!widget.options.isMobile.ios)
        videoElement.attr('autoplay', 'true');
        widget._getVideoElementNative().play();
        widget._setPlayIcon('stop');
        widget.options.isPlaying = true;

        if (!widget.options.canPlay) 
            widget._getLoadingIcon().show();
         else 
            widget._getPosterElement().hide();
         
        
        else //videoplay for iOS devices
             widget._getVideoElementNative().currentTime = 0.1;
    if(widget._getVideoElementNative().readyState !== 4)
        widget._getVideoElementNative().addEventListener('canplaythrough', onCanPlayVideo, false);
        widget._getVideoElementNative().addEventListener('load', onCanPlayVideo, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch.
        setTimeout(function()
        widget._getVideoElementNative().pause(); //block play so it buffers before playing
    , 1); //it needs to be after a delay otherwise it doesn't work properly.
   
   else
   
       widget._getVideoElementNative().play();
   
  

,

     onCanPlayVideo: function()
widget._getVideoElementNative().removeEventListener('canplaythrough', onCanPlay, false);
widget._getVideoElementNative().removeEventListener('load', onCanPlay, false);
//video is ready
widget._getPosterElement().hide();
widget._getVideoElementNative().play();

,

【参考方案1】：

我解决了使用 jQuery 动态注入视频元素的问题。现在当页面加载时没有视频元素，但是当用户单击“播放”时，我创建特定元素并将其设置为播放。关注this answer