Question

所以，我正在修补一个非常拥挤的网络电台播放器，遗憾的是一切都必须在生产模式下打补丁。

<div class="hidden_element" id="hideflash">
    <iframe frameBorder="0" width="315" height="45" id="flash" scrolling="no" src="THESOURCE"></iframe>
</div>
<script type="text/javascript">
    var firefox = /Firefox/i.test(navigator.userAgent);
    if (Modernizr.flash && !firefox) {
        // Supports Flash and is not Firefox
        $("#html5").addClass("is-splash");
        $("#html5").addClass("is-paused");
        $('video').removeAttr("autoplay");
        $("#seekbar").hide();
        $("#html5").hide();
    } 
    if (firefox) {
        // Firefox Detected- Normal HTML5 Initiation
        document.getElementById("flash").contentDocument.close();
        window.frames[0].stop();
        window.frames[0].document.execCommand('Stop');
        $("#hideflash").hide();
    }
    if (!Modernizr.flash) {
        // Flash is not supported
        document.getElementById("flash").contentDocument.close();
        window.frames[0].stop();
        window.frames[0].document.execCommand('Stop');
        $("#hideflash").hide();
    }
</script>

我使用Modernizr自定义脚本来确定浏览器是Firefox还是支持Flash。如果这一切都不是真的，我会卸载HTML5播放器并按计划启动flash iframe。但是，如果检测到Firefox或缺少Flash支持，我会隐藏iframe并启动HTML5播放器。

这是一个非常有问题的设置，但这是满足我公司要求的唯一方法。主要问题是停止加载iframe的代码有时会起作用，有时它也不会。

对这个棘手的建议有什么建议吗？

Answer 1

帕特里克说，你可以使用闪存作为后备。通过使用视频标签，您可以加快网站（而非视频）的加载时间。您可以使用以下

<div class="hidden_element" id="hideflash">
    <iframe frameBorder="0" width="315" height="45" id="flash" scrolling="no" src="THESOURCE"></iframe>
</div>
<video src="video.ogv" controls>
    <script type="text/javascript">
        // Flash is not supported
        document.getElementById("flash").contentDocument.close();
        window.frames[0].stop();
        window.frames[0].document.execCommand('Stop');
        $("#hideflash").hide();
    </script>
</video>

您需要对此进行测试并根据需要进行调整。有关更多信息，请使用this，this或this网站，根据您的需要，每个网站都有不同的方式。

Answer 2

您可以使用Flash作为video标记的后备广告，因为不支持video标记的浏览器会忽略打开和关闭video标记并阅读html介于两者之间。无需使用Modernizr。

<video src="video.ogv" controls>
    <object data="flvplayer.swf" type="application/x-shockwave-flash">
      <param value="flvplayer.swf" name="movie"/>
    </object>
</video>

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Fallback_options

无法阻止加载iframe

2 个答案: