CODEWITHSUNDEEP
javascriptjqueryiphonehtml
Oscar Azpeitia
Oscar Azpeitia

Reputation: 176

iOS "done" callback button on html5 video for jquery

I got several html5 video players on a page, I'm having problems trying to fire a function after the user taps "done" on the Iphone/Ipad native player.

I'm losing my mind on this, I though it would be simple.

The 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);  
 });

The HTML (it repeats several times): 

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

Upvotes: 3

Views: 972

Answers (2)

Oscar Azpeitia
Oscar Azpeitia

Reputation: 176

I Finally got it working, maybe not an elegant solution, but its ok. I had to "hide" the big play button on iOS, and add a statement to the JS.

The 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;
            });
        }
    });

The CSS

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

Upvotes: 1

gantoine
gantoine

Reputation: 1275

You're looking for .bind()

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

Upvotes: 2

Related Questions