Question

我在一个页面上有几个html5视频播放器，我在用户点击完成后尝试触发一个功能时出现问题＆＃34;完成＆＃34;在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>

Answer 1

您正在寻找.bind（）

callback

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

iOS＆＃34;完成＆＃34;用于jquery的html5视频上的回调按钮

2 个答案: