IE8兼容html5视频播放

第一步:引入Script标签

<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>

第二步:编写html代码

<video controls="controls" style="width: 100%; height: 100%; background-color: rgb(0, 0, 0);">
    <source src="1.mp4" type="video/mp4" />
</video>

至此,确定视频文件的显示就搞定了。但是实际开发中经常动态添加video标签,而且src也是不定的,此时上述方式就不能够满足需求了,那么如何动态使用呢?下面上示例:

第一步:依旧引入script标签,没有什么问题

第二步:动态添加代码

首先html未添加之前代码:

<div class="testVideoClass">未添加视频</div>

动态添加代码:

$('.testVideoClass').append('<video src="1.mp4" width="320" height="200" controls preload></video>');

第三步:调用html5media.min.js文件

注意:此时需要简单封装一个方法以便调用:

function showVideo(){
//html5media.min.js中的代码复制粘贴
}

第四步:数据动态添加完毕之后手动调用即可

以上是我处理ie8播放视频使用的方法,希望各位大牛有新的方法的话多多指点,小弟不胜感激!技术拙劣大牛勿喷,谢谢!

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值