IE8 HTMLMediaElement play ()

The following code plays in IE9 + (as well as in Firefox and Chrome). Is there a library that implements the missing functions / polyfills ( audioand method play()) for IE8?

I couldn't get it mediaelement.jsto work, and using jQuery or put <object>inside <audio>seems ugly. Some global initialization (for example shim.init(somepath)) to allow the strip to find its flash files in order, but the code for each tag looks wrong for me, because it can be automated.

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
        function foo()
        {
            var audio = document.getElementById('foo')
            audio.play()    
        }

    </script>
</head>
<body>
    <audio id="foo" preload="none">
        <source src="foo.mp3" type="audio/mpeg">
        <source src="foo.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
    <button onclick="foo()">Play</button>
</body>
</html>
+4
source share
1 answer

MEJS ( jQuery) IE [7-8] object audio.

success, IE .play() (... .pause())

, html

<audio id="myAudioPlayer" src="media/audio.mp3" preload="none"></audio>

<button onclick="audioPlay();">Play</button> 
<button onclick="audioPause();">Pause</button> <!-- optional -->

:

var audio; // global object to be used by IE (and all browsers as a matter of fact)
var isPlaying = false; // flag for event listeners

function audioPlay() {
    // only call play() method if audio is not playing
    // avoids multiple playbacks in IE
    if (!isPlaying) {
        audio.play();
        isPlaying = true;
    }
};

function audioPause() {
    // only call pause() method if audio is playing
    if (isPlaying) {
        audio.pause();
        isPlaying = false;
    }
};

jQuery(document).ready(function ($) {
    var player = new MediaElementPlayer("#myAudioPlayer", {
        success: function (mediaElement, domObject) {
            audio = mediaElement; // set value to global object to be used outside the success setting by IE
            // event listeners so we only call our functions when needed 
            audio.addEventListener('playing', function () {
                isPlaying = true;
            }, false);
            audio.addEventListener('pause', function () {
                isPlaying = false;
            }, false);
        }
    });
}); // ready

, , ( IE)

. JSFIDDLE

audio. Video .

0
source

Source: https://habr.com/ru/post/1542893/


All Articles