兼容IE8的视频播放
目前的很多网站为了加强宣传效果增加了视频，通过video标签很容易实现视频的播放功能，但是万恶的IE8不支持html5的视频播放。虽然如此，我们也有解决的办法，flowplayer提供了一套兼容IE8的视频播放插件，请看下面的例子。
<div class="player">
<video id="players" style="width:500px;">
<source type="video/mp4"src="video/movie.mp4">
</video>
</div>
<input type="button" value="开始" onclick="play(this)">这里我们用一个div包住video标签，视频资源采用mp4格式，下面添加了一个按钮，以便开始于暂停。
var api = $(".player").flowplayer();然后通过这段js来初始化flowplayer，获取api接口。
var api = $(".player").flowplayer();
var tag_play = true;
api.on("pause", function(e, api) {
//播放暂停的时候触发
// alert("sdfse");
});
api.on("finish",function(e, api){
// alert("结束了");
//播放结束的时候触发
});
api.on("resume",function(e,api){
//播放回复的时候触发（刚开始播放的时候也会触发）
tag_play = false;
console.log(tag_play);
});
function play(el){
//点击按钮触发播放事件
if(tag_play){
$(el).val("暂停");
tag_play = false;
}else{
$(el).val("开始");
tag_play = true;
}
$(".fp-ui").click();
}
//当视频播放界面滚动过厚播放暂停
$(window).scroll( function(event){
if($(document).scrollTop()-$(".player").offset().top>$(".player").height()){
if(!tag_play){
console.log("sdfdsdf");
$(".fp-ui").click();
tag_play = true;
}
}
} );以上部分代码是一些基本的控制方式，对于监控播放、暂停、停止已经足够了，并且整理里一个小demo，有兴趣的可以下载下来看一下，欢迎大家给出建议。如果想查看更多的api，请到flowplayer官网查看
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-09-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务