兼容IE8的视频播放

目前的很多网站为了加强宣传效果增加了视频，通过video标签很容易实现视频的播放功能，但是万恶的IE8不支持html5的视频播放。虽然如此，我们也有解决的办法，flowplayer提供了一套兼容IE8的视频播放插件，请看下面的例子。

代码语言：javascript复制

<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格式，下面添加了一个按钮，以便开始于暂停。

代码语言：javascript复制

 var api = $(".player").flowplayer();

然后通过这段js来初始化flowplayer，获取api接口。

代码语言：javascript复制

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

api 云点播

0 人点赞