用于jquery的html5视频上的iOS“完成”回调按钮

Posted 2023-02-24

【中文标题】用于jquery的html5视频上的iOS“完成”回调按钮

【英文标题】：iOS "done" callback button on html5 video for jquery

【发布时间】：2016-01-05 02:29:31

【问题描述】：

我在一个页面上有多个 html5 视频播放器，在用户点击 Iphone/Ipad 原生播放器上的“完成”后尝试触发某个功能时遇到问题。

我正在失去理智，但我认为这很简单。

JS：

$(".mediaplayer").click(function()
    var elVideo = $(this).find('video');
    var elID = elVideo.data("id");
    elVideo.get(0).play();
    elVideo.attr('poster', 'assets/poster_loading.gif');    
    elVideo.on("ended", function() 
        window.location.href = 'redirect.php?id=' + elID;
    );
    elVideo.addEventListener('webkitendfullscreen', function() 
        alert("boom");
    , false);  
 );

HTML（重复多次）：

<div class="asset" data-url="49">
                <div>
                    <div class="asset-name">Plan Test</div>
                    <div class="asset-detail-toggle-icon">
                        <span class="icon-circle-down"></span>
                    </div>
                </div>
                <div class="asset-info" style="display: none;">
                    <div class="asset-author">Author: Circe</div>
                    <div>Descripción: Colombia </div>
                    <!--player-->                        
                    <div class="player">
                        <div class="mediaplayer">
                            <video poster="assets/poster.jpg" controls="" preload="none" data-id="49">
                                <source src="assets/sample.mp4" type="video/mp4">
                                <source src="assets/sample.webm" type="video/webm">
                            </video>
                        </div>
                    </div>
                    <!-- player -->                          
                </div>
            </div>

【参考方案1】：

你正在寻找 .bind()

elVideo.bind('webkitendfullscreen', function() 
  alert("boom");
);

【讨论】：

正确，这里有一些关于 bind 与 addEventListener 的扩展阅读：***.com/questions/2863216/…

这个想法是当视频完成后，将用户重定向到另一个页面。我改为绑定，但它不起作用。在我点击“完成”按钮后，它没有显示警报

发生了什么事。在我点击视频海报后，视频开始播放，我点击完成。完成后点击。我再次点击海报并触发警报！奇怪。

【参考方案2】：

我终于让它工作了，也许不是一个优雅的解决方案，但没关系。我不得不“隐藏”ios 上的大播放按钮，并在 JS 中添加一条语句。

JS

$(".mediaplayer").click(function()
        var elVideo = $(this).find('video');
        var elID = elVideo.data("id");
        elVideo.get(0).play();
        elVideo.attr('poster', 'assets/poster_loading.gif');
        if (navigator.userAgent.match(/(iPod|iPhone|iPad)/))   
            elVideo.bind('webkitendfullscreen', function() 
                window.location.href = 'plan_pregunta.php?id=' + elID;
            );
         else     
            elVideo.on("ended", function() 
                window.location.href = 'plan_pregunta.php?id=' + elID;
            );
        
    );

CSS

video::-webkit-media-controls-start-playback-button 
  display: none !important;
  -webkit-appearance: none;