IE8 HTMLMediaElement play() 垫片答案

【问题标题】：IE8 HTMLMediaElement play() shimIE8 HTMLMediaElement play() 垫片
【发布时间】：2014-07-22 08:30:45
【问题描述】：

以下代码在 IE9+（以及 Firefox 和 Chrome）中播放声音。是否有一个库可以为 IE8 实现/填充缺失的功能（audio 元素和play() 方法）？

我无法让 mediaelement.js 工作，使用 jQuery 或将 <object> 放入 <audio> 看起来很难看。一些全局初始化（如 shim.init(somepath)）让 shim 找到它的 flash 文件很好，但是每个标签的代码在我看来是错误的，因为它应该可以自动化。

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

【问题讨论】：

将object 放在audio 中没有任何问题。根据规范“可以在音频元素内提供内容。用户代理不应向用户显示此内容；它适用于不支持音频的旧版 Web 浏览器，因此可以尝试使用旧版音频插件......”。
我知道它符合标准。这就是为什么我称它为丑陋的。它很丑陋，因为它在兼容的浏览器中是不必要的，并且可以由 shim 自动插入。 shim 的概念是我可以假设我的浏览器是合规的，即使它不合规，我也不必在我的代码中添加与修复不合规相关的语句。
为什么离题？这是一个关于垫片可能性的问题。

标签： javascript html internet-explorer-8 mediaelement.js shim

【解决方案1】：

您无需在 IE[7-8] 中添加额外的库（但 jQuery）或 polyfill，也无需在 audio 标记中添加 object 标记，即可使 MEJS 工作。

解决方法是在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

注意我们添加了几个 event 侦听器，因此我们仅在需要时调用我们的方法（并避免在 IE 中多次播放）

见JSFIDDLE

注意

此代码适用于audio 元素。 Video 元素可能需要其他解决方法。

【讨论】：