腾讯体育全场回放抓取

晚上看比赛不太现实,第二天下班回来看回放吧,一打开网页,偌大的比分让你不想知道结果都不行。于是,写了个简单的html页面,用javascript抓取全场回放的视频地址。这样你就看不到比分了,看比赛才有那种未知的惊喜。

目前测试了西甲,德甲,欧冠。其他甲级联赛应该都是支持的。说不定NBA都支持。

 

下面是完整的代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>腾讯体育全场回放抓取</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <style>
        #content {
            padding: 10px 25px 50px 25px;
        }
        h3 {
            background-color: #ADE5FF;
            border-radius: 5px;
            padding: 5px;
            margin-top: 35px;
        }
        .warning {
            color: red;
        }
        #video {
             height: 300px;
        }
        .step {
             display: inline-block;
             background-color: darkcyan;
             color: #ffffff;
             border-radius: 11px;
             padding: 0 7px;
             margin: 0 8px;
        }
        .btn {
            display: inline-block;
            background-color: blueviolet;
            color: #ffffff;
            padding: 5px 15px;
            border-radius: 5px;
            text-decoration: none;
            min-width: 80px;
            text-align: center;
        }
        .btn:hover {
            background-color: blue;
        }
        body {
            margin: 0px;
        }
        #video {
            position: fixed;
            z-index: 1;
            width: 100%;
            top: 0px;
            background-color: rgba(0, 0, 0, 0.85);
            display: none;
        }
        #videoWrap {
            width: 90%;
            height: 90%;
            margin: 0 auto;
        }
        #videoClose {
            background-color: #000000;
            border-radius: 0 0 0 30px;
            color: #FFFFFF;
            display: block;
            font-weight: bold;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            position: absolute;
            right: 0;
            text-align: center;
            text-decoration: none;
            top: 0;
            width: 50px;
        }
        #videoClose:hover {
            background-color: orangered;
        }
    </style>
</head>
<body>
    <div id="content">
        <h1>腾讯体育全场回放抓取</h1>
        <h3><span class="step">1</span>步:在比赛之前获取 competitionId 和 matchId</h3>
        <p>
            在比赛之前,可以进入看比赛的页面。页面URL包含了这2个参数。如:<br/>
            http://sports.qq.com/kbsweb/football.htm?matchId=726964&competitionId=5
        </p>
        <p class="warning">
            注意:只有这一步是需要在比赛之前做的,后面几步都是比赛之后再做。
        </p>
    
        <h3><span class="step">2</span>步:获取腾讯API返回的JSON数据</h3>
        <table>
            <tr>
                <td>competitionId: </td>
                <td><input type="text" id="txtCompetitionId" name="CompetitionId"/></td>
            </tr>
            <tr>
                <td>matchId: </td>
                <td><input type="text" id="txtMatchId" name="matchId" /></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a class="btn" id="btnGetJson" href="javascript:void(0);" target="_blank">打开新窗口获取JSON</a>
                </td>
            </tr>
        </table>
    
        <h3><span class="step">3</span>步:获取上下半场回放</h3>
        <p>
            把上一步中,在新窗口返回的文本复制粘贴到下方文本框。再点击确定。
        </p>
        <p> 
            <textarea id="txtJson" name="jsonText"></textarea><br/>
        </p>
        <p>
            <a href="javascript:void(0);" id="btnGetRecords" class="btn">确定</a>
        </p>
        <p id="lblRecords">
        
        </p>
        <hr/>
        <h4>附巴萨最近赛事:</h4>
        <ul>
            <li>
                <strong>第8轮 2013/10/06 4:00 VS 巴拉多利德: </strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=707673&competitionId=23
            </li>
            <li>
                <strong>第9轮 2013/10/20 2:00 VS 奥萨苏纳:</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=707683&competitionId=23
            </li>
            <li>
                <strong style="color: orangered;">欧冠小组赛第3轮 2013/10/23 2:45 VS AC米兰</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=726966&competitionId=5
            </li>
            <li>
                <strong>第10轮 2013/10/26 23:00 VS 皇马:</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=707690&competitionId=23
            </li>
            <li>
                <strong>第11轮 2013/10/30 00:00 VS 维戈塞尔塔:</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=707702&competitionId=23
            </li>
            <li>
                <strong>第12轮 2013/11/03 00:00 VS 西班牙人:</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=707713&competitionId=23
            </li>
            <li>
                <strong style="color: orangered;">欧冠小组赛第4轮 2013/11/07 3:45 VS AC米兰</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=726968&competitionId=5
            </li>
            <li>
                <strong>第13轮 2013/11/11 00:00 VS 贝蒂斯:</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=707720&competitionId=23
            </li>
            <li>
                <strong>第14轮 2013/11/25 00:00 VS 格兰纳达:</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=707730&competitionId=23
            </li>
            <li>
                <strong style="color: orangered;">欧冠小组赛第5轮 2013/11/27 3:45 VS 阿贾克斯</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=726970&competitionId=5
            </li>
            <li>
                <strong>第15轮 2013/12/02 0:00 VS 毕尔巴鄂:</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=707739&competitionId=23
            </li>
            <li>
                <strong style="color: orangered;">欧冠小组赛第6轮 2013/12/12 3:45 VS 凯尔特人</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=726972&competitionId=5
            </li>
            <li>
                <strong>第16轮 2013/12/16 0:00 VS 比利亚雷亚尔:</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=707749&competitionId=23
            </li>
            <li>
                <strong>第17轮 2013/12/23 0:00 VS 赫塔菲:</strong>
                http://sports.qq.com/kbsweb/football.htm?matchId=707758&competitionId=23
            </li>
        </ul>    
    </div>

    <div id="video">
        <a id="videoClose" href="javascript:void(0);">关闭</a>
        <div id="videoWrap">
            
        </div>
    </div>
    
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnGetJson').click(function() {
                var competitionId = $('#txtCompetitionId').val();
                var matchId = $('#txtMatchId').val();
                var url = "http://sportswebapi.qq.com/match/view?competitionId=" + competitionId + "&matchId=" + matchId +
                    "&selectTab=all&AppName=kanbisai&random=0.2225677079986781&";
                $(this).attr('href', url);
            });

            $('#btnGetRecords').click(function() {
                var items = [];
                var obj = $.parseJSON($('#txtJson').val())[1];
                var key = "全场回放";
                for (var i = 0; i < obj.tagNews.length; i++) {
                    var news = obj.tagNews[i];
                    if (news.title.indexOf(key) > -1) {
                        items.push({
                            title: news.title,
                            videoId: news.url.substring(news.url.indexOf("vid=") + 4, news.url.length)
                        });
                    }
                }
                for (var j = 0; j < obj.videoNews.length; j++) {
                    var video = obj.videoNews[j];
                    if (video.title.indexOf(key) > -1) {
                        items.push({
                            title: video.title,
                            videoId: video.url.substring(video.url.indexOf("vid=") + 4, video.url.length)
                        });
                    }
                }
                if (items.length == 0) {
                    alert('找不到' + key);
                    return;
                }
                renderLinks(items);
            });
            $('#videoClose').click(function() {
                $('#videoWrap').empty();
                $('#video').hide();
            });
            $('#video').height($(window).height() + 'px');
        });
        
        function renderLinks(items) {
            var $container = $('#lblRecords');
            $container.empty();
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                $container.append('<a href="javascript:void(0);" data-videoId="' + item.videoId + '" >点击观看: ' + item.title + '</a><br/>');
            }
            $container.children("a").click(function() {
                $('#video').show();
                $('#videoWrap').css('margin-top', ($(window).height() - $('#videoWrap').height()) / 2 + 'px');
                var videoId = $(this).attr("data-videoId");
                var videoHtml = '<embed wmode="window" flashvars="vid=' + videoId + '&amp;autoplay=1&amp;list=2&amp;adplay=1&amp;showcfg=1&amp;tpid=0&amp;share=1" src="http://imgcache.qq.com/tencentvideo_v1/player/TPout.swf?max_age=86400&amp;v=20130507" quality="high" name="tenvideo_flash_player_1380639127985" id="tenvideo_flash_player_1380639127985" bgcolor="#000000" width="100%" height="100%" align="middle" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/cn/flashplayer/"> ';
                $('#videoWrap').html(videoHtml);
            });
        }
    </script>
</body>
</html>
View Code

也可以点击下方链接下载:

点此立即下载

 

posted @ 2013-10-02 11:49  Leo C.W  Views(2070)  Comments(1Edit  收藏  举报