javascript - jquery 的 html5 视频上的 iOS "done"回调按钮

Question

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

我对此失去了理智，我认为这很简单。

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()

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