網頁播放Flash視訊嘗試的三種方式
阿新 • • 發佈：2019-02-07
本身不是寫HTML程式碼的，但老闆突然讓解決播放器適配所有瀏覽器的問題，過程有點難受。
播放視訊最開始是使用H5的video標籤播放mp4視訊，但是不支援IE 9以下的瀏覽器，找到的解決方案是html5media，但是在不支援video標籤的瀏覽器上需要等待很長時間才播放視訊。可能的原因是html5media在不支援video標籤的瀏覽器上使用Flash的方式來播放mp4格式的視訊，但是Flash播放mp4視訊不能邊下邊播，所以得等待視訊載入完才能開始播放。
最後想採用Flash的方式播放flv格式的視訊。嘗試了三種方式，雖然都是淺嘗輒止，但是記錄下來也能起到拋磚引玉的作用。
方式一：Flowplayer Flash
用到的檔案包括下面三個
flowplayer-3.2.13.min.jsflowplayer.commercial-3.2.18.swfflowplayer.controls-3.2.16.swf
html程式碼如下：
<head>
<script type="text/javascript" src="flowplayer-3.2.13.min.js"></script>
</head>
<div id="page"> <div id="player" style="display:block;width:810px;height:456px""> </div> <script> flowplayer("player", "flowplayer.commercial-3.2.18.swf",{ clip: { //播放屬性 bufferLength:3, autoPlay: true, autoBuffering: true, url:'http://地址/h264.flv', }, plugins: { controls: { //視訊控制欄 url: 'flowplayer.controls-3.2.16.swf', fontColor: '#ffffff', timeFontColor: '#333333', play:true, volume:true, mute:false, time:true, stop:false, fullscreen:true, scrubber: true, tooltips: { buttons: true, fullscreen: '全屏', play: '播放', pause: '暫停', fullscreenExit : '退出全屏', }, }, }, }); </script> </div>
視訊截圖
方式二：FLV Player 官網下載
需要的檔案
player_flv_maxi.swf
html程式碼如下：
<object type="application/x-shockwave-flash" data="player_flv_maxi.swf" width="810" height="456" > <param name="movie" value="player_flv_maxi.swf" /> <param name="allowFullScreen" value="true" /> <param name="quality" value="high"> <param name="FlashVars" value="flv=http://地址/h264.flv&autoplay=1&autoload=1" /> <embed src="player_flv_maxi.swf" allowfullscreen="true" flashvars="vcastr_file=http://地址/h264.flv&autoplay=1&autoload=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="810" height="456"></embed> </object>
視訊截圖：
方式三：FLV Player
需要的檔案：
flvplayer.swf
程式碼如下：
<body>
<object class="" id="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="810" height="456">
<param name="movie" value="flvplayer.swf">
<param name="quality" value="high">
<param name="allowFullScreen" value="true">
<param name="loop" value="true">
<param name="FlashVars" value="vcastr_file=http://地址/h264.flv&IsAutoPlay=1&IsContinue=1&autoload=1&BufferTime=3">
<embed src="flvplayer.swf" allowfullscreen="true" flashvars="vcastr_file=http://地址/h264.flv&IsAutoPlay=1&autoload=1&IsContinue=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="810" height="456" loop="true">
</object>
視訊截圖：
後來還發現了一個開源庫flv.js，還沒來得及嘗試，先記錄下來。