网页播放Flash视频尝试的三种方式

最新推荐文章于 2024-03-20 16:12:03 发布

bigliang999

最新推荐文章于 2024-03-20 16:12:03 发布

阅读量1.3w

点赞数 1

分类专栏：其他文章标签： FlowPlayer FLV Player .flv

本文链接：https://blog.csdn.net/xieliang5210/article/details/83826243

版权

其他专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本身不是写HTML代码的，但老板突然让解决播放器适配所有浏览器的问题，过程有点难受。

播放视频最开始是使用H5的video标签播放mp4视频，但是不支持IE 9以下的浏览器，找到的解决方案是html5media，但是在不支持video标签的浏览器上需要等待很长时间才播放视频。可能的原因是html5media在不支持video标签的浏览器上使用Flash的方式来播放mp4格式的视频，但是Flash播放mp4视频不能边下边播，所以得等待视频加载完才能开始播放。

最后想采用Flash的方式播放flv格式的视频。尝试了三种方式，虽然都是浅尝辄止，但是记录下来也能起到抛砖引玉的作用。

方式一：Flowplayer Flash

点击跳转官网

用到的文件包括下面三个

flowplayer-3.2.13.min.js
flowplayer.commercial-3.2.18.swf
flowplayer.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>

视频截图：

在这里插入图片描述