兼容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官网查看