choozmo
/
AI_Anchor_Demo


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ai_Anchor_Video</title>


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
        integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

    <link rel="stylesheet" href="./style.css">
</head>

<body id="top">
    <section style="position: relative;">
        <img style="position: absolute; left:15vw; top:8.5vw;z-index: 10;" width="150" src="./img/line_2.png" alt="">
        <div class="video-sec01 card border-0">
            <!-- <img src="./img/T1.png" class="card-img img-fluid" alt="..."> -->
            <div class="row px-0 mx-0">
                <div class="col-lg-2 px-0">
                    <div class="card border-0">
                        <img style="width:14vw;" src="./img/about/home_六角.png" alt="...">
                        <div class="card-img-overlay d-flex justify-content-center align-items-center">
                            <div>
                                <a href="./index.html">
                                    <img class="home-btn"
                                        style="width: 70px; position: relative; right:1.5vw; bottom:20px;"
                                        src="./img/about/home_黑.png" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 px-0">
                    <div class="card border-0">
                        <img style="position: relative; right:20px;" class="img-fluid" src="./img/about/Bar.png" alt="">
                        <div class="card-img-overlay">
                            <div class="mt-3 me-2">
                                <h1 style="font-size:3rem;" class="fw-bold mb-0 text-white" set-lan="html:index-videos">影片導覽</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-1 px-0">
                    <!-- <nav style="margin-top: 40px;" class="navbar"> -->
                    <div style="margin-top: 40px;">
                        <ul style="float: left;" class="navbar-nav mb-2 mb-lg-0 me-3">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" style="font-size: 18px;" href="#"
                                    id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    中/En
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en"
                                            onclick="changeLan(this);window.location.reload();"
                                            value="en">English</button>
                                    </li>
                                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
                                            onclick="changeLan(this);window.location.reload();" value="zh">中文</button>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <div style="float: left;" class="me-auto mt-2">
                            <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i
                                    style="font-size: 18px;" class="fas fa-expand text-dark"></i></a>
                            <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;"
                                class="border-0"><i class="fas fa-compress text-dark"></i></a>
                        </div>
                    </div>
                    <!-- </nav> -->
                </div>
            </div>
            <div class="video-int" style="margin-left: 23vw; margin-top: -3.5vw;">
                <button type="button" data-gt-target="#VTuber-video" data-gt-duration="800" data-gt-offset="0"
                    class="video-btn" set-lan="html:application">實際應用</button>
                <button type="button" data-gt-target="#dailypaper-video" data-gt-duration="800" data-gt-offset="0"
                    class="video-btn" set-lan="html:local_news">地方日報</button>
                <button type="button" data-gt-target="#metaverse-video" data-gt-duration="800" data-gt-offset="0"
                    class="video-btn" set-lan="html:metaverse">元宇宙</button>
                <button type="button" data-gt-target="#NFT-video" data-gt-duration="800" data-gt-offset="0"
                    class="video-btn">NFT</button>
                <button type="button" data-gt-target="#5G-video" data-gt-duration="800" data-gt-offset="0"
                    class="video-btn" set-lan="html:5G_network">5G網路</button>


            </div>

        </div>

        </div>
        <i style="font-size: 48px; position: fixed; bottom:50px; right:50px; color:#193179; cursor: pointer;"
            data-gt-target="#top" data-gt-duration="500" class="gotop fas fa-chevron-circle-up"></i>

    </section>
    <div style="margin-top: 100px;">
        <div style="margin-bottom: 100px;">
            <!-- 實際應用 -->
            <section class="sec-video" style="width: 75vw; margin: 0 auto" id='VTuber-video'>
                <!-- <h1 class="p-2">實際應用</h1> -->
                <div class="row row-cols-lg-3 px-0 mx-0">
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="AAA8pkLcfY8" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/封面_AI Spokesgirl.webp" alt="">
                    </div>
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="83uE8kVIWsM" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/封面_氣象.webp" alt="">
                    </div>
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="y0dgW_dcgDE" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/封面_翠玉.webp" alt="">
                    </div>
                </div>
            
            </section>
            <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:application">實際應用</h1>
        </div>
        <div style="margin-bottom: 100px;">
               <!-- dailypaper -->
            <section class="sec-video" style="width: 75vw; margin: 0 auto" id='dailypaper-video'>
                <!-- <h1 class="p-2" set-lan="html:local_news">地方日報</h1> -->
                <div class="row row-cols-lg-3 px-0 mx-0">
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="EuI2Lh2FWDo" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/0923(1)_YT封面_地方.webp" alt="">
                    </div>
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="YQx_3O8W7hM" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/0917(03)_YT封面_地方.webp" alt="">
                    </div>
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="kzQKfJyQHc0" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/0924(02)_YT封面_地方.webp" alt="">
                    </div>
                </div>
            </section>
            <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:local_news">地方日報</h1>
        </div>
     
        <div style="margin-bottom: 100px;">
            <!-- metaverse -->
            <section class="sec-video" style="width: 75vw; margin:auto"  id='metaverse-video'>
                <!-- <h1 class="p-2" set-lan="html:metaverse">元宇宙</h1> -->
                <div class="row row-cols-lg-3 px-0 mx-0">
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="hoSKF4X5OgU" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/0923_IG封面_NFT.webp" alt="">
                    </div>
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="QQBzJwHjMlk" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/0927_YT封面_NFT.webp" alt="">
                    </div>
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="LsS2SXQ1wrs" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/1001_YT封面_NFT.webp" alt="">
                    </div>
                </div>
            </section>
            <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:metaverse">元宇宙</h1>
        </div>

        
        <div style="margin-bottom: 100px;">
            <!-- NFT -->
            <section class="sec-video" style="width: 75vw; margin: 0 auto" id='NFT-video'>
                <!-- <h1 class="p-2">NFT</h1> -->
                <div class="row row-cols-lg-3 px-0 mx-0">
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="LKOLD4ssEIA" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/0818_YT封面_NFT.webp" alt="">
                    </div>
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="QVYsivxltkg" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/0819_YT封面_NFT.webp" alt="">
                    </div>
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="-udbHXGkqJM" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/0907_YT封面_NFT.webp" alt="">
                    </div>
                </div>
               
            </section>
            <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3">NFT</h1>
        </div>
        <div style="margin-bottom: 100px;">

            <!-- 5G -->
            <section class="sec-video" style="width: 75vw; margin: 0 auto" id='5G-video'>
                <!-- <h1 class="p-2" set-lan="html:5G_network">5G網路</h1> -->
                <div class="row row-cols-lg-3 px-0 mx-0">
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="iZxOOUPWL-Q"
                            data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/video/1007_YT封面_NFT.webp" alt="">
                    </div>
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="NWyxxTfBAmA" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/1005_YT封面_NFT.webp" alt="">
                    </div>
                    <div class="col">
                        <img class="video-img img-fluid"
                            data-info="C0EHKQX-B4M" data-bs-toggle="modal"
                            data-bs-target="#exampleModal" src="./img/video/1006_YT封面_NFT.webp" alt="">
                    </div>
                </div>
            </section>
            <h1 style="font-size: 32px;background:#D4DAEC; color:#193179; margin-top: -100px;" class="py-5 fw-bold ps-3" set-lan="html:5G_network">5G網路</h1>
        </div>
          

        <div class="closeplay modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel1"
            aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
                <div class="modal-content bg-transparent border-0">
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title" id="exampleModalLabel"></h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"><img src="./img/close.svg" alt=""></button>
                    </div>
                    <div id="video-modal" class="modal-body">
                        <style>
                            .embed-container {
                                position: relative;
                                padding-bottom: 56.25%;
                                height: 0;
                                overflow: hidden;
                                max-width: 100%;
                            }

                            .embed-container iframe,
                            .embed-container object,
                            .embed-container embed {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                            }
                        </style>
                        <div class='embed-container'><iframe class='youtube-video' src='https://www.youtube.com/embed//XfTQ2uIWWbA'
                                frameborder='0' allowfullscreen height="394" allow="autoplay;"></iframe></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/lan.js"></script>
    <script src="./gotovideo.js"></script>

    <script>


        $("*").each(function (index, element) {
            // 此元素被點選後執行
            $(this).click(function (e) {
                // 取得被點選元素的屬性：data-gt-target
                var target = $(this).attr("data-gt-target");
                var duration = $(this).attr("data-gt-duration");
                var offset = $(this).attr("data-gt-offset");

                // JS 語法：判斷式
                // if (條件) {程式區塊}
                // 當條件成立，會執行程式區塊

                // 如果 目標有資料 才會執行 { } 內的程式
                // 避免出現 undefine (未定義 - 不存在的資料)
                if (target) {
                    //console.log("目標：" + target);
                    //console.log("時間：" + duration);
                    //console.log("位移：" + offset);

                    // 上方位置 = 目標區塊.位移().上方位置
                    var top = $(target).offset().top;
                    //console.log("要前往元素的上方位置：" + top);

                    // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
                    // parseInt() 將文字轉為數字

                    $("html").stop().animate({
                        scrollTop: top - offset
                    }, parseInt(duration));
                }
            });
        });
        var expandbtn = document.getElementById("expand");
        var compressionbtn = document.getElementById("compression");

        // Using JavaScript to open the page in fullscreen mode
        var elem = document.documentElement;
        function openFullscreen() {
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
                compressionbtn.style.display = 'inline';
            } else if (elem.webkitRequestFullscreen) { /* Safari */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE11 */
                elem.msRequestFullscreen();
            }
        }

        function closeFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
                compressionbtn.style.display = 'none';

            } else if (document.webkitExitFullscreen) { /* Safari */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE11 */
                document.msExitFullscreen();
            }
        }
        // 避免動畫與使用者滾輪衝突
        // html 在滾動滾輪時 停止 html 所有效果
        $("html").on("mousewheel", function () {
            $("html").stop();
        });

        // $(".video-img").click(function () {
        //     var videosrc = $(this).data("info");
        //     console.log(videosrc);

        //     videoSRCauto = videosrc + "?autoplay=1";

        //     let VideoContent = `
        //     <style>
        //     .embed-container {
        //     position: relative;
        //     padding-bottom: 56.25%;
        //     height: 0;
        //     overflow: hidden;
        //     max-width: 100%;
        //     }
        //     .embed-container iframe,
        //     .embed-container object,
        //     .embed-container embed {
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //      width: 100%;
        //      height: 100%;
        //     }
        //     </style>
        //     <div class='embed-container'><iframe class='youtube-video' src='${videoSRCauto}'
        //     frameborder='0' allowfullscreen></iframe></div>
        //     `;
        //     $('#video-modal').html(VideoContent);
        // });

        // $('.btn-close').click(function () {
        //     $('.youtube-video').each(function () {
        //         this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
        //     });
        // });

        // $('.closeplay').click(function () {
        //     $('.youtube-video').each(function () {
        //         this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
        //     });
        // });


    </script>
</body>

</html>