发布时间:2025-12-09 19:53:42 浏览次数:7
本身不是写HTML代码的,但老板突然让解决播放器适配所有浏览器的问题,过程有点难受。
播放视频最开始是使用H5的video标签播放mp4视频,但是不支持IE 9以下的浏览器,找到的解决方案是html5media,但是在不支持video标签的浏览器上需要等待很长时间才播放视频。可能的原因是html5media在不支持video标签的浏览器上使用Flash的方式来播放mp4格式的视频,但是Flash播放mp4视频不能边下边播,所以得等待视频加载完才能开始播放。
最后想采用Flash的方式播放flv格式的视频。尝试了三种方式,虽然都是浅尝辄止,但是记录下来也能起到抛砖引玉的作用。
点击跳转官网
用到的文件包括下面三个
html代码如下:
<head><script type="text/javascript" src="flowplayer-3.2.13.min.js"></script></head> <p id="page"><p id="player" style="display:block;width:810px;height:456px""> </p><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></p>视频截图
点击跳转官网
需要的文件
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>视频截图:
需要的文件:
代码如下:
<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>视频截图:
Demo地址
后来还发现了一个开源库flv.js,还没来得及尝试,先记录下来。