Tạo web bằng php không biết sai chỗ nào


Em đang tạo 1 list danh sách các video từ youtube các link đó em đều lưu trong bảng video( gồm các cột :mavideo;tenvideo;link) trong php admin. Em muốn làm chỉ cần click vào thẻ li là iframe sẽ tự phát video, mà không biết lỗi ở đau click mà không đuọc(như hình)
Đây là đoạn code của em

<body>
        <?php 
            include('ketnoi.php');
            include('header.php'); 
        ?> 
        
        <iframe src="list_bai_viet.php" width="900px" height="500px" id="iframe1" name="iframe" style="float: right;scrolling: none" ></iframe>
        <iframe width="350px" height="300" style="float: left;" src="https://www.youtube.com/embed/" class="embed-player" frameborder="0" allowfullscreen></iframe>
                <br />
                <?php
                    $query5 = "select * from video order by mavideo desc";
                    $result5 = mysqli_query($abc,$query5)or die(mysqli_error($abc));
                    
                ?>
                <ul style="width: 300px;">
                    <?php
                       while($video=mysqli_fetch_array($result5,MYSQLI_ASSOC)){
                            $cat = explode('=',$video['link']);
                    ?>    
                    
                            <li class="chay"><a style="cursor: pointer;" title="<?php echo $cat['1'];?>"><i>&nbsp;<?php echo $video['tenvideo'];?></i></a></li>
                    <?php
                        }
                    ?>
                    <script type="text/javascript">
                        $(document).ready(function(){
                            $('.chay').click(function(e){
                                $(this).parent().siblings('.embed-player').attr('src','https://www.youtube.com/embed/'+$(this).children('a').attr('title'))
                            });
                        });
                    </script>
                </ul>
    </body>

Someone help me please :’(:’( :’(

Tôi giả thuyết là bạn đã đặt tham chiếu đến JQuery đâu đó trong file header.php và connection string cho MySQL trong ketnoi.php, đồng thời kết nối của bạn hoạt động tốt và bạn có thể query dữ liệu từ table video MySQL mà không gặp vấn đề gì.

Nếu như vậy, khi bạn dùng các công cụ debug đi kèm theo browser (F12 nếu dùng Chrome) và inspect danh sách các video, bạn sẽ thấy mã HTML tương tự thế này:

<ul style="width: 300px;">
    <li class="chay"><a style="cursor: pointer;" title="h0UBfmOJYO4"><i>&nbsp;video title 1</i></a></li>
    <li class="chay"><a style="cursor: pointer;" title="h0UBfmOJYO4"><i>&nbsp;video title 2</i></a></li>
    <li class="chay"><a style="cursor: pointer;" title="gB9N8qeBGsk"><i>&nbsp;video title 3</i></a></li>

(Lưu ý: bạn nên bổ sung thêm tag </ul> và nhớ đóng kết nối với CSDL sau khi đã query xong)

Nếu các tag <li> của bạn có đầy đủ các giá trị cho title như trên, thì phần còn thiếu của bạn là tham số autoplay=1 trong đoạn mã jQuery cuối cùng:

$(this).parent().siblings('.embed-player').attr('src','https://www.youtube.com/embed/'+$(this).children('a').attr('title')+'?autoplay=1')

Khi bạn thêm autoplay=1 thì video sẽ play khi bạn click vào một trong các tag <li> như yêu cầu của bạn.

5 Likes


Em cảm ơn ạ. Nhưng e f12 lên nó bị lỗi như này ạ

Bạn đang bên phần Console. Đó không phải lỗi, chỉ cảnh báo thôi.
Nhấn qua phần Elements để xem kết quả xử lý JS->HTML nhận được.

3 Likes

Đó không chính xác là lỗi mà chỉ là khuyến cáo (warning) rằng một hàm được dùng trong mã JavaScript (Element.createShadowRoot) đã không được hỗ trợ bởi phiên bản Chrome hiện tại (tôi chưa dùng qua CốcCốc, nhưng theo tôi biết thì Cốc Cốc dùng engine của Chrome - Chromium) và sẽ không còn trong tương lai (deprecated). Nếu bạn không khai báo tham chiếu đến file document_start.js trong mã của bạn thì nhiều khả năng khuyến cáo này gây ra bởi một trong các extension bạn đã cài trong trình duyệt của bạn. Tôi không nghĩ điều đó ảnh hưởng đến các trang mà bạn đã viết.

Theo như tôi thấy, bạn không có nhiều kinh nghiệm dùng Developer Tool của Chrome. Đây là người bạn đồng hành không thể thiếu nếu bạn muốn trở thành Web Developer. Bạn nên đọc kỹ tài liệu về nó tại đây:

Đặc biệt, bạn nên tìm hiểu chức năng Inspect mà tôi đã đề nghị bạn sử dụng để tìm ra mã HTML cho các tag <li> được tạo ra bởi mã PHP của bạn. Bạn có thể đọc thêm tại đây:

Nếu bạn dùng Firefox hay Edge thì các trình duyệt này cũng có công cụ tương tự như vậy và đều được kích hoạt bằng F12.

5 Likes

Muốn autoplay iframe phải thêm thuộc tính vào thẻ iframe. Xem Autoplay Policy https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

5 Likes

Em cảm ơn các anh giúp đỡ rất nhiêth tình

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?