简易flv播放器jquery.jflv.js

  简易flv播放器,可用通过js控制flv播放,暂停。具体参考下面的示例说明,已经做成jquery插件形式。

简易flv播放器jquery.jflv.js

注意:要用js控制flv的播放停止,需要将示例发布后,通过http访问,要不会报错:uncaught exception: Error in Actionscript. Use a try/catch block to find error.Line 0

uncaught exception: Error in Actionscript. Use a try/catch block to find error.Line 0

  jquery.jflv.js示例及使用说明文档

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简易flv播放器jquery.jflv.js</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    /***简易flv播放器,可用通过js控制flv播放,暂停。
    *方法
    *PlayFLV(url):播放flv文件。参数url,flv的路径
    *PauseFLV():暂停flv播放。
    *SetVol(v):设置播放器音量。0~100的数字,视频音量默认100
    *事件名称,对应window作用域下的JS函数名称
    *GetFlvMeta(totalTime,bytesTotal):接受flv元数据事件。参数totalTime(总播放时间,单位秒),bytesTotal(视频大小,单位字节)
    *Playing(totalTime,playheadTime):播放视频过程事件,0.25s调用一次。参数totalTime(总播放时间,单位秒),playheadTime(当前播放时间,单位秒)
    *Loading(bytesTotal,bytesLoaded):下载视频过程事件,0.25s调用一次。参数bytesTotal(视频大小,单位字节),bytesLoaded(已下载大小,单位字节)
    *PlayEnd():视频播放结束事件。无参数
    作者:Showbo http://www.w3dev.cn/
    */
    jQuery.fn.jflv = function (opts, p) {//opts:调用方法时为字符串,否则为JSON配置对象。p:调用方法时的参数,url或者v,参考上面
        if (opts === 'PlayFLV' || opts === 'PauseFLV' || opts === 'SetVol') //调用方法
            return this.each(function () {
                var id = $(this).data('flvplayerid');
                if (!id) return; //没有初始化
                var player = document[id] || window[id]; //获得swf容器
                player[opts](p); //调用方法
            });
        var playerpath = "";
        var options = {
            //jflv配置
            flvplayer: '/jflv.swf', //flv的swf播放器位置,默认和当前html页面同目录
            width: 215, //flv播放器宽度
            height: 145, //flv播放器高度
            autoplay: false, //是否自动播放
            //事件,说明参考上面,默认缺省
            GetFlvMeta: '',
            Playing: '',
            Loading: '',
            PlayEnd: ''
        };
        if (opts) jQuery.extend(options, opts);
        var gpms = 'autoplay=' + options.autoplay + '&GetFlvMeta=' + options.GetFlvMeta + '&Playing=' + options.Playing + '&Loading=' + options.Loading + '&PlayEnd=' + options.PlayEnd;
        return this.each(function () {
            var filename = jQuery(this).html().toLowerCase(); //注意容器内只放置flv的路径,flv的路径相对于flv swf播放器的位置,或者使用绝对路径
            if (filename.indexOf(".flv") == -1) return true;
            var flvplayID = 'player' + new Date().getTime(); //生成flv播放器的唯一id
            $(this).data('flvplayerid', flvplayID); //缓存id
            var pms = gpms + '&fn=' + filename;
            var flvhtml = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="' + flvplayID + '" ';
            flvhtml += 'width="' + options.width + '" height="' + options.height + '" ';
            flvhtml += 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">';
            flvhtml += '<param name="movie" value="' + options.flvplayer + '?' + pms + '" />'
            flvhtml += '<param name="wmode" value="transparent" />';
            flvhtml += '<embed allowScriptAccess="always" wmode="transparent" width="' + options.width + '" height="' + options.height + '" ';
            flvhtml += 'src="' + options.flvplayer + '?' + pms + '" ';
            flvhtml += 'type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="' + flvplayID + '" />';
            flvhtml += '</object>';
            jQuery(this).html(flvhtml);
        });
    };
    /*jquery.jflv.js测试代码*/
    function GetFlvMeta(totalTime, bytesTotal) { $('#dvLogs').append('总时间:' + totalTime + 's 文件大小:' + bytesTotal + 'bytes<br>'); }
    function Playing(totalTime, playheadTime) { $('#dvLogs').append('当前播放时间:' + playheadTime + 's<br>'); }
    function Loading(bytesTotal, bytesLoaded) { $('#dvLogs').append('已下载大小:' + bytesLoaded + 'bytes<br>'); }
    function PlayEnd() { $('#dvLogs').append('视频播放完毕<br>'); }
    $(function () {
        $('span.jflv').jflv({ Playing: 'Playing', GetFlvMeta: 'GetFlvMeta', PlayEnd: 'PlayEnd',Loading:'Loading' });
        $('input[type="button"]').click(function () {
            switch (this.value) {
                case '播放': $('span.jflv').jflv('PlayFLV'); break;
                case '暂停': $('span.jflv').jflv('PauseFLV'); break;
                case '关闭声音': $('span.jflv').jflv('SetVol', 0); break;
                case '打开声音': $('span.jflv').jflv('SetVol', 100); break;
                case '播放FLV视频': $('span.jflv').jflv('PlayFLV', $('#txtUrl').val()); break;
                default:
                    var i = $(this).prev();
                    if (i.val() == '') { alert('请输入FLV视频地址!'); i.focus(); return false; }
                    $('span.jflv').jflv('PlayFLV', i.val());
            }
        });
    });
</script>
</head>
<body>
<span class="jflv">http://www.hezhoubb.jcy.gov.cn/upload/video/20150816/215336800.flv</span>
<input type="button" value="播放" /> <input type="button" value="暂停" /> <input type="button" value="关闭声音" /> <input type="button" value="打开声音" />
播放FLV视频:<input type="text" id="txtUrl" style="width:500px" value="http://www.hezhoubb.jcy.gov.cn/upload/video/20150816/215336800.flv" /><input type="button" value="播放FLV视频" />
<div id="dvLogs"></div>
</body>
</html>

源代码下载

加支付宝好友偷能量挖...


原创文章,转载请注明出处:简易flv播放器jquery.jflv.js

评论(0)Web开发网
阅读(1280)喜欢(0)JavaScript/Ajax开发技巧