Showing a different html element depending on browser. HTML5 Safari Autoplay button

Question

I have a website which includes a HTML5 Video player. By default the videos play automatically on every page load. I have a button that shows a pause button, because this would be the first thing a user would do as the video is already playing.

However when viewing the Video on Safari, the video will not automatically play (https://stackoverflow.com/a/12496184). So i'm wondering how to hide this pause button and show the play button in Safari by default. Below is what I have:

function stopPlayer() {
    var mediaPlayer;

    mediaPlayer = document.getElementById('media-video');
    mediaPlayer.controls = false;   

    mediaPlayer.pause();
    mediaPlayer.currentTime = 0;

    if ( mediaPlayer.pause ) {
        $('.pause-btn').hide();
        $('.play-btn').show();
    }

}

function playPlayer() {
    var mediaPlayer;

    mediaPlayer = document.getElementById('media-video');
    mediaPlayer.controls = false;   

    mediaPlayer.play();
}

function playPause() {
    var mediaPlayer = document.getElementById('media-video');
    if (mediaPlayer.paused) {
        mediaPlayer.play(); 
        $('.pause-btn').show();
        $('.play-btn').hide();
    } else {
        mediaPlayer.pause(); 
        $('.play-btn').show();
        $('.pause-btn').hide();
    }

}

// Swap the button states around in Safari
if (navigator.userAgent.match(/AppleWebKit/) && ! navigator.userAgent.match(/Chrome/)) {

    $('.pause-btn').hide();
    $('.play-btn').show();

}

EDIT: I just had to add a document ready to the bottom of my code. Below is the new fixed version:

function stopPlayer() {
    var mediaPlayer;

    mediaPlayer = document.getElementById('media-video');
    mediaPlayer.controls = false;   

    mediaPlayer.pause();
    mediaPlayer.currentTime = 0;

    if ( mediaPlayer.pause ) {
        $('.pause-btn').hide();
        $('.play-btn').show();
    }

}

function playPlayer() {
    var mediaPlayer;

    mediaPlayer = document.getElementById('media-video');
    mediaPlayer.controls = false;   

    mediaPlayer.play();
}

function playPause() {
    var mediaPlayer = document.getElementById('media-video');
    if (mediaPlayer.paused) {
        mediaPlayer.play(); 
        $('.pause-btn').show();
        $('.play-btn').hide();
    } else {
        mediaPlayer.pause(); 
        $('.play-btn').show();
        $('.pause-btn').hide();
    }

}

 // Swap the button states around in Safari, after the dom has loaded.
$( document ).ready(function() {

    if (navigator.userAgent.match(/AppleWebKit/) && ! navigator.userAgent.match(/Chrome/)) {

        $('.pause-btn').hide();
        $('.play-btn').show();

    }
});

score 0 · Answer 1 · answered Jan 07 '14 at 11:01

0

If ($.browser.safari) {
    // hide pause button and show play button
}

Note: This is a jquery based solution

answered Jan 07 '14 at 11:01

Selvaraj M A

3,096
3
30
46

My javascript based detection works as I have successfully used the alert() function to give me results in just Safari. I'm wondering how to hide my buttons. More of a jQuery question with .show .hide – rowefx Jan 07 '14 at 11:06
Anyway, $.browser has been removed from jQuery – A. Wolff Jan 07 '14 at 11:07
1

I think the problem is you are trying to hide/show button before they are actually loaded. Try wrapping your code in a jquery ready event handler. – Selvaraj M A Jan 07 '14 at 11:16
@SelvarajMA you're completely right. This has solved my issue! Thanks. – rowefx Jan 07 '14 at 11:20

score 0 · Answer 2 · answered Jan 07 '14 at 11:21

0

My problem was that I was trying to manipulate the dom before it had loaded. I have added my fixed code to my original answer. Many thanks to @SelvarajMA for pointing this out.

answered Jan 07 '14 at 11:21

rowefx

265
2
9
26

Showing a different html element depending on browser. HTML5 Safari Autoplay button

2 Answers2