兼容各浏览器的video标签播放器

首先，在html头部引入如下js文件：

/*
 * flowplayer.js 3.2.6. The Flowplayer API
 *
 * Copyright 2009-2011 Flowplayer Oy
 *
 * This file is part of Flowplayer.
 *
 * Flowplayer is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Flowplayer is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Flowplayer.  If not, see <http://www.gnu.org/licenses/>.
 *
 * Date: 2011-02-04 05:45:28 -0500 (Fri, 04 Feb 2011)
 * Revision: 614
 */
(function(){
 function g(o){
 console.log("$f.fireEvent",[].slice.call(o))}function k(q){
 if(!q||typeof q!="object"){
 return q}var o=new q.constructor();for(var p in q){
 if(q.hasOwnProperty(p)){
 o[p]=k(q[p])}}return o}function m(t,q){
 if(!t){
 return}var o,p=0,r=t.length;if(r===undefined){
 for(o in t){
 if(q.call(t[o],o,t[o])===false){
 break}}}else{
 for(var s=t[0];p<r&&q.call(s,p,s)!==false;s=t[++p]){}}return t}function c(o){
 return document.getElementById(o)}function i(q,p,o){
 if(typeof p!="object"){
 return q}if(q&&p){
 m(p,function(r,s){
 if(!o||typeof s!="function"){q[r]=s}})}return q}function n(s){
 var q=s.indexOf(".");if(q!=-1){
 var p=s.slice(0,q)||"*";var o=s.slice(q+1,s.length);var r=[];m(document.getElementsByTagName(p),function(){
 if(this.className&&this.className.indexOf(o)!=-1){
 r.push(this)}});return r}}function f(o){o=o||window.event;if(o.preventDefault){o.stopPropagation();o.preventDefault()}else{o.returnValue=false;o.cancelBubble=true}return false}function j(q,o,p){q[o]=q[o]||[];q[o].push(p)}function e(){
 return"_"+(""+Math.random()).slice(2,10)}var h=function(t,r,s){
 var q=this,p={},u={};q.index=r;if(typeof t=="string"){t={
 url:t}}i(this,t,true);m(("Begin*,Start,Pause*,Resume*,Seek*,Stop*,Finish*,LastSecond,Update,BufferFull,BufferEmpty,BufferStop").split(","),function(){
 var v="on"+this;if(v.indexOf("*")!=-1){v=v.slice(0,v.length-1);var w="onBefore"+v.slice(2);q[w]=function(x){j(u,w,x);return q}}q[v]=function(x){j(u,v,x);return q};if(r==-1){
 if(q[w]){s[w]=q[w]}if(q[v]){s[v]=q[v]}}});i(this,{onCuepoint:function(x,w){
 if(arguments.length==1){p.embedded=[null,x];return q}if(typeof x=="number"){x=[x]}var v=e();p[v]=[x,w];if(s.isLoaded()){s._api().fp_addCuepoints(x,r,v)}return q},update:function(w){i(q,w);if(s.isLoaded()){s._api().fp_updateClip(w,r)}var v=s.getConfig();var x=(r==-1)?v.clip:v.playlist[r];i(x,w,true)},_fireEvent:function(v,y,w,A){
 if(v=="onLoad"){m(p,function(B,C){
 if(C[0]){s._api().fp_addCuepoints(C[0],r,B)}});return false}A=A||q;if(v=="onCuepoint"){
 var z=p[y];if(z){
 return z[1].call(s,A,w)}}if(y&&"onBeforeBegin,onMetaData,onStart,onUpdate,onResume".indexOf(v)!=-1){i(A,y);if(y.metaData){
 if(!A.duration){A.duration=y.metaData.duration}else{A.fullDuration=y.metaData.duration}}}var x=true;m(u[v],function(){x=this.call(s,A,y,w)});return x}});if(t.onCuepoint){
 var o=t.onCuepoint;q.onCuepoint.apply(q,typeof o=="function"?[o]:o);delete t.onCuepoint}m(t,function(v,w){
 if(typeof w=="function"){j(u,v,w);delete t[v]}});if(r==-1){s.onCuepoint=this.onCuepoint}};var l=function(p,r,q,t){
 var o=this,s={},u=false;if(t){i(s,t)}m(r,function(v,w){
 if(typeof w=="function"){s[v]=w;delete r[v]}});i(this,{animate:function(y,z,x){
 if(!y){
 return o}if(typeof z=="function"){x=z;z=500}if(typeof y=="string"){
 var w=y;y={};y[w]=z;z=500}if(x){
 var v=e();s[v]=x}if(z===undefined){z=500}r=q._api().fp_animate(p,y,z,v);return o},css:function(w,x){
 if(x!==undefined){
 var v={};v[w]=x;w=v}r=q._api().fp_css(p,w);i(o,r);return o},show:function(){
 this.display="block";q._api().fp_showPlugin(p);return o},hide:function(){
 this.display="none";q._api().fp_hidePlugin(p);return o},toggle:function(){
 this.display=q._api().fp_togglePlugin(p);return o},fadeTo:function(y,x,w){
 if(typeof x=="function"){w=x;x=500}if(w){
 var v=e();s[v]=w}this.display=q._api().fp_fadeTo(p,y,x,v);this.opacity=y;return o},fadeIn:function(w,v){
 return o.fadeTo(1,w,v)},fadeOut:function(w,v){
 return o.fadeTo(0,w,v)},getName:function(){
 return p},getPlayer:function(){
 return q},_fireEvent:function(w,v,x){
 if(w=="onUpdate"){
 var z=q._api().fp_getPlugin(p);if(!z){
 return}i(o,z);delete o.methods;if(!u){m(z.methods,function(){
 var B=""+this;o[B]=function(){
 var C=[].slice.call(arguments);var D=q._api().fp_invoke(p,B,C);return D==="undefined"||D===undefined?o:D}});u=true}}var A=s[w];if(A){
 var y=A.apply(o,v);if(w.slice(0,1)=="_"){
 delete s[w]}return y}return o}})};function b(q,G,t){
 var w=this,v=null,D=false,u,s,F=[],y={},x={},E,r,p,C,o,A;i(w,{id:function(){
 return E},isLoaded:function(){
 return(v!==null&&v.fp_play!==undefined&&!D)},getParent:function(){
 return q},hide:function(H){
 if(H){q.style.height="0px"}if(w.isLoaded()){v.style.height="0px"}return w},show:function(){q.style.height=A+"px";if(w.isLoaded()){v.style.height=o+"px"}return w},isHidden:function(){
 return w.isLoaded()&&parseInt(v.style.height,10)===0},load:function(J){
 if(!w.isLoaded()&&w._fireEvent("onBeforeLoad")!==false){
 var H=function(){u=q.innerHTML;if(u&&!flashembed.isSupported(G.version)){q.innerHTML=""}if(J){J.cached=true;j(x,"onLoad",J)}flashembed(q,G,{config:t})};var I=0;m(a,function(){
 this.unload(function(K){
 if(++I==a.length){H()}})})}return w},unload:function(J){
 if(this.isFullscreen()&&/WebKit/i.test(navigator.userAgent)){
 if(J){J(false)}