xiugai完了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Keywords" content="騰訊雲會客廳,騰訊雲,QQ,Tencent">
    <meta name="description" content="騰訊雲會客廳">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <link rel="stylesheet" href="https://mc.qcloudimg.com/static/style/8c6eee6b2107ef25dc486020ced13898/normalize.css">
    <link rel="stylesheet" href="https://mc.qcloudimg.com/static/style/6af34d0737ad0ca608111771cf74cc79/swiper.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>騰訊雲會客廳</title>
    <script>
        var baseWidth = 375,
            baseHeiht = 603,
            baseFontSize = 50,
            newSize = 1,
            sacle = 1;

        var sacle = Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeiht),
            newSize = parseInt(sacle * 10000 * baseFontSize) / 10000;

        document.documentElement.style.fontSize = newSize + "px";
    </script>
</head>

<body>
    <div class="myLoading">
        <div class="svg-wrap">
            <svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"
                style="background: none;">
                <circle cx="50" cy="50" fill="none" ng-attr-stroke="" ng-attr-stroke-width="" ng-attr-r="" ng-attr-stroke-dasharray="" stroke="#ffffff"
                    stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(324 50 50)">
                    <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s"
                        begin="0s" repeatCount="indefinite"></animateTransform>
                </circle>
            </svg>
        </div>
        <p class="progress-num" id="loading">0%</p>
    </div>
    <div id="o2_loading" class="loading">
        <div class="btns">
            <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play btn begin">
            <div class="loading-cover"></div>
        </div>
    </div>
    <div id="o2_main" class="main">
        <div class="wrapper">
            <video id="video" class="video" preload="auto" playsinline src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/5%20%E5%BC%80%E5%A4%B4%E7%AB%96%E7%89%8815s%E8%A7%86%E9%A2%91/30s%E7%AB%96%E7%89%88%E5%BC%80%E5%9C%BA.mp4"
                width="1" height="1" type="video/mp4"></video>
        </div>
        <div class="btns control">
            <a class="btn continue">繼續</a>
            <a class="btn skip">跳過</a>
        </div>
        <div class="poster"></div>
    </div>
    <div class="mod-player" id="mod-player"></div>
    <div class="video-title">
        <!-- <p class="">美麗聯合CEO陳琪:智慧電商不安分的技術心</p> -->
        <p class="">蔚來李斌:智能汽車須要智能雲</p>
    </div>
    <!-- Slider main container -->
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
                <div class="content intro clearfix">
                    <div class="mod-title">
                        <img src="https://mc.qcloudimg.com/static/img/3ef78690b25acaf3b1f7b1fd6eb62b9a/title-before.png" alt="" class="title-before">
                        <span class="">欄目介紹</span>
                    </div>
                    <p class="intro-title">騰訊雲會客廳
                        <img src="https://mc.qcloudimg.com/static/img/fd51ec9d85aa385d3668ddf42ace04b9/logo.png" alt="logo"
                            class="logo" width="auto" height="48px">
                    </p>
                    <p class="intro-detail">聚焦雲計算熱點話題,專家視角,洞察產業趨勢</p>
                    <div class="guide">
                        <img src="https://mc.qcloudimg.com/static/img/8d3eac1baf0ec96b1e4496948043a412/guide.jpg" alt="guide" class="">
                    </div>
                    <div class="guest">
                        <!-- <img src="https://mc.qcloudimg.com/static/img/ffdb1982f9bd7e835034ffcabf8ca9b7/guest.jpg" alt="guest" class=""> -->
                        <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/2%20%E6%A0%8F%E7%9B%AE%E4%BB%8B%E7%BB%8D%E5%98%89%E5%AE%BE%E5%9B%BE/%E6%9D%8E%E6%96%8C.png"
                            alt="guest" class="">
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="content current-point">
                    <div class="mod-title">
                        <img src="https://mc.qcloudimg.com/static/img/3ef78690b25acaf3b1f7b1fd6eb62b9a/title-before.png" alt="" class="title-before">
                        <span class="">本期看點</span>
                    </div>
                    <div class="vqq-wrap">
                        <a class="vqq-item clearfix show-video" href="javascript:;" data-vid="z05146qildk">
                            <div class="vqq-cover-wrap">
                                <!-- <img src="https://mc.qcloudimg.com/static/img/c0e5dec4872e0eb0f5b6b28aabe5bdfd/current-1.jpg" alt="" class="vqq-cover"> -->
                                <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B91.jpg"
                                    alt="" class="vqq-cover">
                                <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                            </div>
                            <p class="vqq-title">李斌眼中的汽車3.0時代是怎樣的?</p>
                            <!-- <p class="vqq-detail">雲計算驅動遊戲產業騰飛</p> -->
                        </a>
                        <a class="vqq-item clearfix mt60 show-video" href="javascript:;" data-vid="r0514rohdtm">
                            <div class="vqq-cover-wrap">
                                <!-- <img src="https://mc.qcloudimg.com/static/img/a11425b45d12156c76d9752da531b0b6/current-2.jpg" alt="" class="vqq-cover"> -->
                                <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B92.png"
                                    alt="" class="vqq-cover">
                                <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                            </div>
                            <p class="vqq-title">蔚來如何從新定義用戶體驗</p>
                            <!-- <p class="vqq-detail">雲計算驅動遊戲產業騰飛</p> -->
                        </a>
                    </div>
                    <div class="show-more">
                        <a href="javascript:;" class="mod-btn" id="showCurrentPoint">查看更多</a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="content review">
                    <div class="mod-title">
                        <img src="https://mc.qcloudimg.com/static/img/3ef78690b25acaf3b1f7b1fd6eb62b9a/title-before.png" alt="" class="title-before">
                        <span class="">往期回顧</span>
                    </div>
                    <div class="vqq-wrap">
                        <a class="vqq-item clearfix show-video" href="javascript:;" data-vid="q05019umr82">
                            <div class="vqq-cover-wrap">
                                <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/4%20%E5%BE%80%E6%9C%9F%E5%9B%9E%E9%A1%BE%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%AC%AC22%E6%9C%9F%20%E8%98%91%E8%8F%87%E8%A1%97%E6%9D%8E%E6%96%8C.png"
                                    alt="" class="vqq-cover">
                                <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                            </div>
                            <p class="vqq-title">美麗聯合CEO陳琪</p>
                            <p class="vqq-detail">智慧電商不安分的技術心</p>
                        </a>
                        <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x0506969bdp">
                            <div class="vqq-cover-wrap">
                                <img src="https://mc.qcloudimg.com/static/img/1dd862e386976f3c0004f077989946cd/past-18.png" alt="" class="vqq-cover">
                                <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                            </div>
                            <p class="vqq-title">去哪兒網:張強</p>
                            <p class="vqq-detail">人工智能是將來?</p>
                        </a>
                        <!-- <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="e0396be80re">
<div class="vqq-cover-wrap">
<img src="https://mc.qcloudimg.com/static/img/fbf74c5781ff45926b7da54547fc9303/past-17.png" alt="" class="vqq-cover">
<img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
</div>
<p class="vqq-title">G7:吳海波</p>
<p class="vqq-detail">他們正在改變貨車司機的命運</p>
</a> -->
                    </div>
                    <div class="show-more">
                        <a href="javascript:;" class="mod-btn" id="showReviewPoint">查看更多</a>
                    </div>
                    <!-- <p class="slide-guide">精彩,值得被更多人看見!</p> -->
                </div>
            </div>
            <div class="swiper-slide">
                <div class="content qrcode-content">
                    <div class="qrcode-wrap">
                        <img src="https://mc.qcloudimg.com/static/img/a768c578195c64041887b114f6428601/qrcode.png" alt="qrcode" class="qrcode">
                    </div>
                    <p class="qrcode-text">掃碼關注騰訊雲</p>
                    <div class="show-more">
                        <a href="javascript:;" class="mod-btn" id="qrcodeShow">分享</a>
                    </div>
                    <!-- <p class="slide-guide">精彩,值得被更多人看見!</p> -->
                </div>
            </div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
        <!-- If we need navigation buttons -->
        <!-- <div class="swiper-button-prev"></div> -->
        <!-- <div class="swiper-button-next"></div> -->
        <!-- If we need scrollbar -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <div class="slider-up animated infinite slideInUp"></div>
    <!-- 橫屏提示代碼 [[ -->
    <div id="orientation_hinter" class="landscape">
        <div class="hinter_phone">
            <i></i>
        </div>
        <div class="hinter_rotate"></div>
        <div class="hinter_text landscape">豎屏體驗效果更佳</div>
        <div class="hinter_text portrait">橫屏體驗效果更佳</div>
    </div>
    <!-- 橫屏提示代碼 ]] -->
    <!-- 分享彈層 [[ -->
    <div class="share"></div>
    <!-- 分享彈層 ]] -->
    <!-- 查看更多 [[ -->
    <div class="review-more" id="reviewPoint">
        <div class="mod-title">
            <img src="https://mc.qcloudimg.com/static/img/3ef78690b25acaf3b1f7b1fd6eb62b9a/title-before.png" alt="" class="title-before">
            <span class="">往期回顧</span>
        </div>
        <div class="vqq-wrap">
            <a class="vqq-item clearfix show-video" href="javascript:;" data-vid="q05019umr82">
                <div class="vqq-cover-wrap">
                    <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/4%20%E5%BE%80%E6%9C%9F%E5%9B%9E%E9%A1%BE%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%AC%AC22%E6%9C%9F%20%E8%98%91%E8%8F%87%E8%A1%97%E6%9D%8E%E6%96%8C.png"
                        alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">美麗聯合CEO陳琪</p>
                <p class="vqq-detail">智慧電商不安分的技術心</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="h0549gxsdc4">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/38d704666dee79c3daa375e80d89b883/past-21.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">KOL--Keso洪波</p>
                <p class="vqq-detail">互聯網的上半場拼什麼?</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x05483usdlp">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/c2f923ad6d80a0473d4d58f0340d0aef/past-20.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">財經做家吳曉波</p>
                <p class="vqq-detail">《騰訊傳》背後的故事</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="k0544opab15">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/1ff8640844895e2ff583fc0b807eba03/past-19.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">真格基金徐小平</p>
                <p class="vqq-detail">把創業者夢想架在雲上</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x0506969bdp">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/1dd862e386976f3c0004f077989946cd/past-18.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">去哪兒網:張強</p>
                <p class="vqq-detail">人工智能是將來?</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="e0396be80re">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/fbf74c5781ff45926b7da54547fc9303/past-17.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">G7:吳海波</p>
                <p class="vqq-detail">他們正在改變貨車司機的命運</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="m0394e272cx">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/38d7181979fef2847bb4b1c8cef3cfeb/past-16.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">三一重工:賀東東</p>
                <p class="vqq-detail">你瞭解工業4.0嗎?</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x0323qx00yh">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/1ad4fafb74c00055ca8cf3db9029bca5/past-15.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">安心保險:鍾誠</p>
                <p class="vqq-detail">互聯網巨頭角逐金融雲</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="e0323ujhq2h">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/8f5e94aab6005a379ce116475e71a3c1/past-14.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">58集團:邢宏宇</p>
                <p class="vqq-detail">漫步雲端的58,怎麼個神奇法?</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="l0326jxwn17">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/37f4d2333fa5c3c93b51b9866a05a9b1/past-13.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">巨人網絡:胡遠星</p>
                <p class="vqq-detail">是什麼驅動遊戲產業的騰飛?</p>
            </a>
            <!-- <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="c032465t9in">
<div class="vqq-cover-wrap">
<img src="https://mc.qcloudimg.com/static/img/bcc6c4d99a47d7f95fc066be85e2e748/past-12.png" alt="" class="vqq-cover">
<img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
</div>
<p class="vqq-title">餓了麼:張雪峯</p>
<p class="vqq-detail">020邁進下半場的關鍵竟是它</p>
</a> -->
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="r0321q98t0f">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/8166234e5f6bbf79eba702c8185cace5/past-11.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">同程旅遊:張海龍</p>
                <p class="vqq-detail">雲化路上須要最信任的夥伴</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="q0316036mzu">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/31f085c9b69126f965906556afe32ecb/past-10.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">75峯會特別節目</p>
                <p class="vqq-detail">萬科、新東方、美的大佬有話說</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="p0306fccp3n">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/ea89da8d9b4adc4a9fd9324ce061a771/past-9.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">小紅書:郄小虎</p>
                <p class="vqq-detail">雲計算和小紅書之間的祕密</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="p0300nr7r3a">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/7716eb6c2fbd492028c81fd733e23524/past-8.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">百合網:楊溢欣</p>
                <p class="vqq-detail">揭祕婚戀生態圈的基實</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="a0186nevz6f">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/268b60680f07c0257ccdcd85808f6cfa/past-7.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">富途證券:陳偉華</p>
                <p class="vqq-detail">富途證券,何以成互聯網新貴?</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x0182e50ql8">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/56eca836e4ad3c1175929aef9a56f63d/past-6.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">ZEALER:王自如</p>
                <p class="vqq-detail">保護用戶體驗是關鍵</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="j01754n4mek">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/295b85caf99b8a59def68c1a90f2bc1b/past-5.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">微票兒:楊森淼</p>
                <p class="vqq-detail">微票兒年增加率4000%的祕訣?</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="g0173y526ht">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/8f94fa0c14d2816bfde22bc31daff4f3/past-4.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">龍珠直播:譚振林</p>
                <p class="vqq-detail">電競圈"黑馬"的崛起祕笈</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="p0163o0hqmz">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/1ab90ff025dea66f440c9914842bd5ba/past-3.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">土巴兔:王國彬</p>
                <p class="vqq-detail">家裝界Uber的七年之癢</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="l01617gsdti">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/408c7425d6fa5d023beecd5e0e7fde50/past-2.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">e袋洗:岑永洪</p>
                <p class="vqq-detail">1億美圓B輪融資背後的故事</p>
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="q0157pd9tj4">
                <div class="vqq-cover-wrap">
                    <img src="https://mc.qcloudimg.com/static/img/4588a618ea0a5b7e3978a4a61b1963f2/past-1.png" alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">滴滴出行:張博</p>
                <p class="vqq-detail">解密滴滴如何挺過"補貼大戰"?</p>
            </a>
        </div>
        <div class="hide-review-more">
            <a href="javascript:;" class="mod-btn" id="hideReviewPoint">收起</a>
        </div>
    </div>
    <!-- 查看更多 ]] -->
    <!-- 查看更多 [[ -->
    <div class="review-more" id="currentPoint">
        <div class="mod-title">
            <img src="https://mc.qcloudimg.com/static/img/3ef78690b25acaf3b1f7b1fd6eb62b9a/title-before.png" alt="" class="title-before">
            <span class="">本期看點</span>
        </div>
        <div class="vqq-wrap">
            <a class="vqq-item clearfix show-video" href="javascript:;" data-vid="z05146qildk">
                <div class="vqq-cover-wrap">
                    <!-- <img src="https://mc.qcloudimg.com/static/img/c0e5dec4872e0eb0f5b6b28aabe5bdfd/current-1.jpg" alt="" class="vqq-cover"> -->
                    <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B91.jpg"
                        alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">李斌眼中的汽車3.0時代是怎樣的?</p>
                <!-- <p class="vqq-detail">人工智能是將來?</p> -->
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="r0514rohdtm">
                <div class="vqq-cover-wrap">
                    <!-- <img src="https://mc.qcloudimg.com/static/img/a11425b45d12156c76d9752da531b0b6/current-2.jpg" alt="" class="vqq-cover"> -->
                    <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B92.png"
                        alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">蔚來如何從新定義用戶體驗</p>
                <!-- <p class="vqq-detail">他們正在改變貨車司機的命運</p> -->
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="b0514qxsm0w">
                <div class="vqq-cover-wrap">
                    <!-- <img src="https://mc.qcloudimg.com/static/img/9c692971c9d231a150456286297ce7b7/current-3.jpg" alt="" class="vqq-cover"> -->
                    <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B93.png"
                        alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">汽車3.0時代須要怎樣的雲服務商</p>
                <!-- <p class="vqq-detail">你瞭解工業4.0嗎?</p> -->
            </a>
            <a class="vqq-item clearfix mt30 show-video" href="javascript:;" data-vid="x05148austn">
                <div class="vqq-cover-wrap">
                    <!-- <img src="https://mc.qcloudimg.com/static/img/b2face89c9302c9e70b81d6356625306/current-4.jpg" alt="" class="vqq-cover"> -->
                    <img src="http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/3%20%E6%9C%AC%E6%9C%9F%E7%9C%8B%E7%82%B9%E5%B0%81%E9%9D%A2%E5%9B%BE/%E7%9C%8B%E7%82%B94.jpg"
                        alt="" class="vqq-cover">
                    <img src="https://mc.qcloudimg.com/static/img/4fb68841eafb758723aa7def3364edf3/play.png" alt="" class="play">
                </div>
                <p class="vqq-title">蔚來董事長李斌這樣評價與騰訊雲的合做</p>
                <!-- <p class="vqq-detail">互聯網巨頭角逐金融雲</p> -->
            </a>
        </div>
        <div class="hide-review-more">
            <a href="javascript:;" class="mod-btn" id="hideCurrentPoint">收起</a>
        </div>
    </div>
    <!-- 查看更多 ]] -->
    <div class="modal-video">
        <div class="vide-content" id="vide-content"></div>
        <div class="close-modal"></div>
    </div>
    <script src="https://mc.qcloudimg.com/static/script/9a328a6916e3ec86ebd4f3fa832fb233/jquery.1.9.1.js"></script>
    <script src="./js/resLoader.js"></script>
    <script>
        var loader = new resLoader({
            resources: ['https://mc.qcloudimg.com/static/style/8c6eee6b2107ef25dc486020ced13898/normalize.css',
                'https://mc.qcloudimg.com/static/style/6af34d0737ad0ca608111771cf74cc79/swiper.min.css',
                'https://mc.qcloudimg.com/static/img/d294ae6966d2151a6fe16b9a69ca4b65/loading-cover.jpg',
                'https://mc.qcloudimg.com/static/script/7220abf5713b68943c18a9f9ceef740a/iphone-inline-video.min.js'
            ],
            onStart: function (total) {
                // console.log('start:' + total);
            },
            onProgress: function (current, total) {
                // console.log(current + '/' + total);
                var percent = parseInt(current / total * 100);
                $('#loading').text(percent + '%');
                $('.progress').css({
                    'width': percent + '%'
                });
            },
            onComplete: function (total) {
                setTimeout(function () {
                    $('.myLoading').hide();
                }, 2000);
            }
        });

        loader.start();
    </script>
    <script src="https://mc.qcloudimg.com/static/script/e8e7a359343270c64dc77834da6baa25/swiper.min.js"></script>
    <script src="https://mc.qcloudimg.com/static/script/4170c05656255775ea13e32cabf8fc55/jquery.touchSwipe.min.js"></script>
    <script src="https://vm.gtimg.cn/tencentvideo/txp/js/txplayer.js"></script>
    <script src="https://mc.qcloudimg.com/static/script/7220abf5713b68943c18a9f9ceef740a/iphone-inline-video.min.js"></script>
    <script src="./js/video.js"></script>
    <script>
        var meet = {
            _w: document.documentElement.clientWidth,
            _h: document.documentElement.clientWidth,
            init: function () {
                this.videoHeight = this.getHeight(16 / 9);
                this.active();
                this.initSwiper();
                this.touchSwipeReview();
                this.showShare();
                this.closeShare();
                this.showReviewPoint();
                this.showCurrentPoint();
                this.reviewPointVideo();
            },
            initVideo: function (id, pic) {
                var _this = this;
                var player = new Txplayer({
                    containerId: 'mod-player',
                    vid: id,
                    width: _this._w,
                    height: _this.videoHeight,
                    poster: pic
                });
            },
            getHeight: function (scale) {
                return this._w / scale;
            },
            active: function () {
                var _this = this;
                $('.mod-player').css({
                    'width': _this._w,
                    'height': _this.videoHeight
                });
                $('#vide-content').css({
                    'margin-top': (_this._h - _this.videoHeight) / 2
                })
                // 限制微信下滑露出地址
                document.querySelector('body').addEventListener('touchmove', function (e) {
                    if (!document.querySelector('.review-more').contains(e.target)) {
                        e.preventDefault();
                    }
                })
                _this.initVideo('j0511ygervb',
                    'http://external-1255598498.file.myqcloud.com/public_h5/%E8%94%9A%E6%9D%A5H5/1%20%E5%AE%8C%E6%95%B4%E7%89%88%E8%A7%86%E9%A2%91%E5%B0%81%E9%9D%A2%E5%9B%BE/%E5%B0%81%E9%9D%A2%E5%9B%BE.JPG'
                );
            },
            initSwiper: function () {
                var mySwiper = new Swiper('.swiper-container', {
                    // Optional parameters
                    direction: 'vertical',
                    loop: false,
                    pagination: '.swiper-pagination',
                    speed: 200,
                    onSlideChangeStart: function (swiper) {
                        console.log(swiper.activeIndex);
                        if (swiper.activeIndex === 2) {
                            $('.slider-up').addClass('slider-up-guide');
                        } else {

                        }
                    }
                })
            },
            touchSwipeReview: function () {
                $(".review").swipe({
                    //Generic swipe handler for all directions
                    swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
                        // console.log("You swiped " + direction);
                        if (direction === 'up') {
                            // $('.share').fadeIn();
                        }
                    }
                });
            },
            showShare: function () {
                $('#qrcodeShow').on('click', function () {
                    $('.share').fadeIn();
                })
            },
            closeShare: function () {
                $('.share').on('click', function () {
                    $(this).fadeOut();
                })
            },
            showReviewPoint: function () {
                $('#showReviewPoint').on('click', function () {
                    $('#reviewPoint').fadeIn();
                })
                $('#hideReviewPoint').on('click', function () {
                    $('#reviewPoint').fadeOut();
                })
            },
            showCurrentPoint: function () {
                $('#showCurrentPoint').on('click', function () {
                    $('#currentPoint').fadeIn();
                })
                $('#hideCurrentPoint').on('click', function () {
                    $('#currentPoint').fadeOut();
                })
            },
            reviewPointVideo: function () {
                var _this = this;
                var player;
                $('.show-video').on('click', function () {
                    var vid = $(this).attr('data-vid');
                    console.log(vid)
                    player = new Txplayer({
                        containerId: 'vide-content',
                        vid: vid,
                        width: _this._w,
                        height: _this.videoHeight
                    });
                    $('.modal-video').fadeIn();
                })
                $('.close-modal').on('click', function () {
                    $('.modal-video').fadeOut();
                    $('#vide-content').empty();
                })
            }
        }

        $(document).ready(function () {
            $('body').on('touchmove', function (event) {
                // event.preventDefault();
            });
            meet.init();
        });
    </script>
</body>

</html>
相關文章
相關標籤/搜索