videoplaytest

gotovideo.js

@@ -1,14 +1,50 @@
-// $('.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": ""}', '*');
+$(".video-img").click(function () {
+    var videosrc = $(this).data("info");
+    console.log(videosrc);
+
+    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='${videosrc}'
+    frameborder='0' allowfullscreen></iframe></div>
+    `;
+    $('#video-modal').html(VideoContent);
+
+});
+$('.play-video').click(function(){
+	$('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
+});
+
+
+// function autoPlayYouTubeModal() {
+//     var trigger = $("body").find('[data-toggle="modal"]');
+//     trigger.click(function () {
+//         var theModal = $(this).data("target"),
+//             videoSRC = $(this).attr("data-theVideo"),
+//             videoSRCauto = videoSRC + "?autoplay=1";
+//         $(theModal + ' iframe').attr('src', videoSRCauto);
+//         $(theModal + ' button.close').click(function () {
+//             $(theModal + ' iframe').attr('src', videoSRC);
+//         });
 //     });
-// });
+// }
 
 
 
@@ -28,3 +64,5 @@ $(document).on("click", "#exampleModal", function (event) {
     // window.location.reload();
 
 });
+
+

video.html

@@ -76,16 +76,19 @@
             <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="https://www.youtube.com/embed//iZxOOUPWL-Q?enablejsapi=1"
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//iZxOOUPWL-Q?enablejsapi=1&version=3&playerapiid=ytplayer"
                         data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1007_YT封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//NWyxxTfBAmA?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1005_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//NWyxxTfBAmA?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/1005_YT封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//C0EHKQX-B4M?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1006_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//C0EHKQX-B4M?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/1006_YT封面_NFT.png" alt="">
                 </div>
             </div>
             <!-- 
@@ -200,16 +203,19 @@
             <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="https://www.youtube.com/embed//LKOLD4ssEIA?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0818_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//LKOLD4ssEIA?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0818_YT封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//QVYsivxltkg?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0819_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//QVYsivxltkg?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0819_YT封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//-udbHXGkqJM?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0907_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//-udbHXGkqJM?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0907_YT封面_NFT.png" alt="">
                 </div>
             </div>
             <!-- <div class="closeplay modal fade" id="NFT-video01" tabindex="-1" aria-labelledby="exampleModalLabel"
@@ -325,16 +331,19 @@
             <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="https://www.youtube.com/embed//hoSKF4X5OgU?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0923_IG封面_NFT.png" alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//hoSKF4X5OgU?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0923_IG封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//QQBzJwHjMlk?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0927_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//QQBzJwHjMlk?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0927_YT封面_NFT.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//LsS2SXQ1wrs?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1001_YT封面_NFT.png" alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//LsS2SXQ1wrs?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/1001_YT封面_NFT.png" alt="">
                 </div>
             </div>
             <!-- <div class="closeplay modal fade" id="metaverse01" tabindex="-1" aria-labelledby="exampleModalLabel2"
@@ -448,18 +457,19 @@
             <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="https://www.youtube.com/embed//EuI2Lh2FWDo?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0923(1)_YT封面_地方.png" alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//EuI2Lh2FWDo?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0923(1)_YT封面_地方.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//YQx_3O8W7hM?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0917(03)_YT封面_地方.png"
-                        alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//YQx_3O8W7hM?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0917(03)_YT封面_地方.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//kzQKfJyQHc0?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0924(02)_YT封面_地方.png"
-                        alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//kzQKfJyQHc0?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0924(02)_YT封面_地方.png" alt="">
                 </div>
             </div>
             <!-- <div class="closeplay modal fade" id="dailypaper01" tabindex="-1" aria-labelledby="exampleModalLabel2"
@@ -573,19 +583,19 @@
             <h1 class="p-2">VTuber</h1>
             <div class="row row-cols-lg-3 px-0 mx-0">
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//ie31G94r7QE?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0726_YT封面_Vtuber.png"
-                        alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//ie31G94r7QE?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0726_YT封面_Vtuber.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//QIbinFBjJxA?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0727_YT封面_Vtuber.png"
-                        alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//QIbinFBjJxA?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0727_YT封面_Vtuber.png" alt="">
                 </div>
                 <div class="col">
-                    <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//6JVBDIM7zac?enablejsapi=1"
-                        data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0804_YT封面_Vtuber.png"
-                        alt="">
+                    <img class="video-img img-fluid"
+                        data-info="https://www.youtube.com/embed//6JVBDIM7zac?enablejsapi=1" data-bs-toggle="modal"
+                        data-bs-target="#exampleModal" src="./img/封面/0804_YT封面_Vtuber.png" alt="">
                 </div>
             </div>
             <!-- <div class="closeplay modal fade" id="VTuber01" tabindex="-1" aria-labelledby="exampleModalLabel2"
@@ -711,6 +721,13 @@
             </div>
         </div>
     </div>
+    <div><button href="#" class="play-video">Play Video</button></div>
+    <div><a href="#" class="stop-video">Stop Video</a></div>
+    <div><a href="#" class="pause-video">Pause Video</a></div>
+
+    <iframe class="youtube-video" width="560" height="315"
+        src="https://www.youtube.com/embed//C0EHKQX-B4M?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
+
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
         crossorigin="anonymous"></script>
@@ -720,7 +737,20 @@
     <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>
+        $('.play-video').click(function () {
+            $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
+        });
+
+        $('a.stop-video').click(function () {
+            $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
+        });
+
+        $('a.pause-video').click(function () {
+            $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
+        });
+
         $("*").each(function (index, element) {
             // 此元素被點選後執行
             $(this).click(function (e) {
@@ -760,34 +790,36 @@
             $("html").stop();
         });
 
-        $(".video-img").click(function () {
-            var videosrc = $(this).data("info");
-            console.log(videosrc);
-
-            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='${videosrc}'
-            frameborder='0' allowfullscreen></iframe></div>
-            `;
-            $('#video-modal').html(VideoContent);
-        });
+        // $(".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 () {
@@ -800,6 +832,8 @@
         //         this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
         //     });
         // });
+
+
     </script>
 </body>