Html5结合flash在所有主流播放器播放视频的方法

1
2

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"/>
<script src="http://vjs.zencdn.net/c/video.js"></script>

1
23

< !–[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]–>

1
23
4

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="275" height="200" poster="http://www.feiliu.com/zt/img/20120417/preview.jpg" data-setup="{}">
<source src="http://www.feiliu.com/zt/video/mv00.mp4" type='video/mp4'/>
<source src="http://www.feiliu.com/zt/video/test2.webm" type='video/webm'/>
</video>

1
23
4
5
6
7
8
9
10
1112
13
14
15
16
17
18
19
20
2122
23
24
25
26
27
28
29
30
3132
33
34
35
36
37
38
39
40
4142
43
44
45
46
47
48
49
50
5152
53
54
55
56
57
58
59

<link rel="stylesheet" href="css/video-js.css" type="text/css"/>
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
// Must come after the video.js library

// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();//可选。不写此函数默认为显示播放控制条，鼠标移开隐藏

/* ============= OR ============ */

// Setup and store a reference to the player(s).
// Must happen after the DOM is loaded
// You can use any library's DOM Ready method instead of VideoJS.DOMReady

/*
VideoJS.DOMReady(function(){

// Using the video's ID or element
var myPlayer = VideoJS.setup("example_video_1");

// OR using an array of video elements/IDs
// Note: It returns an array of players
var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);

// OR all videos on the page
var myManyPlayers = VideoJS.setup("All");

// After you have references to your players you can...(example)
myPlayer.play(); // Starts playing the video for this player.
});
*/

/* ========= SETTING OPTIONS ========= */

// Set options when setting up the videos. The defaults are shown here.

/*
VideoJS.setupAllWhenReady({
controlsBelow: false, // Display control bar below video instead of in front of
controlsHiding: true, // Hide controls when mouse is not over the video
defaultVolume: 0.85, // Will be overridden by user's last volume if available
flashVersion: 9, // Required flash version for fallback
linksHiding: true // Hide download links when video is supported
});
*/

// Or as the second option of VideoJS.setup

/*
VideoJS.DOMReady(function(){
var myPlayer = VideoJS.setup("example_video_1", {
// Same options
});
});
*/
</script>
《/pre>

<strong>步骤二</strong>：在body显示视频位置添加如下代码：

1
23
4
5
6
7
8
9
10
1112
13
14
15
16

<div class="vd">
<!-- Begin VideoJS -->
<div class="video-js-box">
<video id="example_video_1" class="video-js" width="280" height="210" controls preload="none" poster="http://www.feiliu.com/zt/img/20120417/img01.jpg">
<source src="http://www.feiliu.com/zt/video/mv01.mp4" type='video/mp4;' />
<source src="http://www.feiliu.com/zt/video/test2.webm" type='video/webm'/>
<object id="flash_fallback_1" class="vjs-flash-fallback" width="280" height="210" type="application/x-shockwave-flash" data="http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf">
<param name="movie" value="http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://www.feiliu.com/zt/img/20120417/img01.jpg", {"url": "http://www.feiliu.com/zt/video/mv01.flv","autoPlay":false,"autoBuffering":true}]}' />
<img src="http://www.feiliu.com/zt/img/20120417/img01.jpg" width="280" height="210" alt="Poster Image"  title="No video playback capabilities." />
</object>
</video>
</div>
<!-- End VideoJS -->
</div>

1
23
4
5
6
7
8
9
10
1112
13
14
15
16
17
18

<div class="vd">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="280" height="210">
<param name="movie" value="http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2&isAutoPlay=false&isShowRelatedVideo=false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param value="true" name="allowfullscreen" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="flashvars" value="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999"/>
<embed height="210" align="middle" width="280" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="aprilfools" flashvars="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999" src="http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2&isAutoPlay=false&isShowRelatedVideo=false"  menu="true" play="true" allowfullscreen="true" allowscriptaccess="sameDomain" quality="high" wmode="transparent" bgcolor="#fff" ver="10.0.0"/>
</object>
</div>

1
23

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="280" height="210" poster="http://www.feiliu.com/zt/img/20120417/preview.jpg" data-setup="{}">
<source src="http://www.feiliu.com/zt/video/mv01.mp4" type='video/mp4'/>
</video>

1

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

1
23
4

<!-- 视频媒体标签 -->
<video src="http://www.feiliu.com/zt/video/mv02.mp4" width="480" height="320" controls preload></video>
<!-- 音频媒体标签 -->
<audio src="http://www.feiliu.com/zt/audio/test.mp3" controls loop></audio>