视频，音频支持ie8浏览器回显

最新推荐文章于 2022-07-11 07:35:00 发布

那年夏天我们十八

最新推荐文章于 2022-07-11 07:35:00 发布

阅读量229

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37029026/article/details/88965887

本文介绍如何在IE8浏览器中实现HTML5音视频标签的兼容性，包括直接在HTML中使用标签和通过JavaScript动态生成标签的方法，并提供了一种通过引入html5media.min.js来解决IE8不支持原生HTML5音视频播放的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：IE8之前，默认不支持视频和音频html5标签。所以想在ie8下面，兼容视频音频，必须引入flash通过流媒体来播放

音频标签：

//直接写在html里面
<audio  id="audio_l" class="audio_lr" controls="controls">
<source src="../../image/dream.mp3" type="audio/mpeg">
</audio>
//写在js里面也是兼容ie8
兼容ie8写法：
$("#audio_l").html("<audio controls>" +
    '<source src="' + Util.constants.MULTIMEDIA_IP + "/kc/doc/multimediasvc/msa/showmulitmedial?attachid=" + result.RSP.DATA[0].ATTACHID + '" type="audio/mpeg">' +
    "</audio>");

视频标签：

//html
<video style="display: none" id="video_l" class="video_lr" width="640" height="360" controls="controls"
src="../../image/movie_1.mp4" type="video/mp4"></video>
//js
$("#video_r").html("<video controls width='640' height='360'><source src=" + Util.constants.MULTIMEDIA_IP + "/kc/doc/multimediasvc/msa/showmulitmediar?attachid=" + result.RSP.DATA[0].FIELD3 + " type='video/mp4'></video>");

兼容IE8步骤
第一步：

<script type="text/javascript" src="../../js/common/requirejs-main.js"></script>
<script type="text/javascript" src="../../assets/lib/require/require.min.js"
        data-main="js/manage/muiltMediaCompare"></script>
<script src="../../assets/common/html5media.min.js"></script>

第二步：引入对应的js组建 html5media.min.js （里面引入了其他js）
下载地址：
添加链接描述