Trang 1 / 2 12 LastLast
Hiển thị kết quả từ 1 đến 10 / 16
  1. #1
    Tham gia
    07-11-2008
    Bài viết
    345
    Like
    2
    Thanked 2 Times in 1 Post

    Cần giúp đỡ load content bằng ajax

    Chào các bạn, trong csdl mình có 2 field: link_title, embed_code.
    Giờ mình nhập liệu cho 2 field này:
    link_title - embed_code
    Play Video 1 - Embed của video 1
    Play Video 2 - Embed của video 2
    Giờ mình muốn hiển thị như trong ảnh. Khi mình click vào play video 2 nó sẽ hiện video 2, click vào play video 1 nó sẽ hiện video 1
    Các bạn chỉ giúp mình cách làm với. Mình cảm ơn!
    12186682_712118332221873_3460610050478030422_o.jpg
    Quote Quote

  2. #2
    Tham gia
    30-10-2015
    Bài viết
    12
    Like
    0
    Thanked 0 Times in 0 Posts
    Bạn có thể dùng 1 cái plugin để play media (như jquery-youtube-player) và các bước như sau
    1. Code backend lấy tất cả data (từ field link_title, embed_code)
    2. Sau đó, xuất data này ra html nhưng cần phải theo định dạng của plugin (jquery-youtube-player)
    Mình chưa biết chi tiết code bạn dùng ngôn ngữ gì, có dùng framework hay CMS gì nên chỉ đại khái như vậy. Hy vọng giúp được bạn phần nào.

  3. #3
    Tham gia
    23-10-2015
    Location
    truyengiaitri.info
    Bài viết
    45
    Like
    13
    Thanked 9 Times in 8 Posts
    Quote Được gửi bởi haicoseu View Post
    Chào các bạn, trong csdl mình có 2 field: link_title, embed_code.
    Giờ mình nhập liệu cho 2 field này:
    link_title - embed_code
    Play Video 1 - Embed của video 1
    Play Video 2 - Embed của video 2
    Giờ mình muốn hiển thị như trong ảnh. Khi mình click vào play video 2 nó sẽ hiện video 2, click vào play video 1 nó sẽ hiện video 1
    Các bạn chỉ giúp mình cách làm với. Mình cảm ơn!
    12186682_712118332221873_3460610050478030422_o.jpg
    - Bạn hãy dùgn Jquery, có 1 div id='video_container' để hiển thị nội dung của Video 1 hoặc Video 2.
    - Tạo 2 link bên dưới link VIDEO_1 và link VIDEO_2, tạo sự kiện click cho 2 link này.

    HTML:
    <div id='video_container'> </div>
    <a class='btn_video' href='#' valuemember = 'link_video_1'>VIDEO_1</a>
    <a class='btn_video' href='#' valuemember = 'link_video_2'>VIDEO_2</a>

    Jquery:
    - Đăng ký sự kiện click:
    $('.btn_video').on("click",function(){

    var current_link = $(this).attr('valuemember');

    -- làm tiếp load video, gán vào $('#video_contaner')
    });
    Đọc truyện chữ | truyengiaitri .info

  4. #4
    Tham gia
    07-11-2008
    Bài viết
    345
    Like
    2
    Thanked 2 Times in 1 Post
    Bạn ơi có phải như này không bạn, mình làm mà nó ko hiện:
    Code:
    <html>
    <head>
    
    <script src="http://localhost/vidswitcher/jquery-1.11.3.min.js"></script>
    <script type="text/javascript"> 
    $('.btn_video').on("click",function(){
    
    var current_link = $(this).attr('valuemember');
     $('#video_contaner').html(current_link);
    </script>
     
    
    </head>
    
    <body>
    <div id='video_container'></div>
    <a class='btn_video' href='#' valuemember = '<iframe width="560" height="315" src="https://www.youtube.com/embed/d-uBA5ukqsU" frameborder="0" allowfullscreen></iframe>'>VIDEO_1</a> 
    <a class='btn_video' href='#' valuemember = '<iframe width="560" height="315" src="https://www.youtube.com/embed/446-_RUp9jM" frameborder="0" allowfullscreen></iframe>'>VIDEO_2</a> 
    
    </body>
    </html>

  5. #5
    Tham gia
    07-11-2008
    Bài viết
    345
    Like
    2
    Thanked 2 Times in 1 Post
    @imahappycoder: Mình dùng wordpress nhưng mình embed ở nhiều trang khác nữa chứ ko phải mỗi youtube

  6. #6
    Tham gia
    23-10-2015
    Location
    truyengiaitri.info
    Bài viết
    45
    Like
    13
    Thanked 9 Times in 8 Posts
    - Trong code bạn gõ sai vài chổ, và các đoạn jquery, bạn nên để ở phía dưới và trên tag </body> nhé.
    - Bạn lấy code mình đã làm lại (chạy được)

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head> 
    	<meta charset="utf-8">
    
    </head>
    
    <body>
    <div id='video_container'>
    	
    </div>
    
    <div>
    <a class='btn_video' href='#' valuemember = 'LINK_YOUTUBE_1'>VIDEO_1</a> 
    <a class='btn_video' href='#' valuemember = 'LINK_YOUTUBE_2'>VIDEO_2</a> 
    </div>
    
    <script src="LINK_FILE_JQUERY"></script>
    
    <script type="text/javascript"> 
    $('.btn_video').on("click",function(){
    
    	var current_link = $(this).attr('valuemember');
    
    	$('#video_container').html('<iframe width="560" height="315" src="'+ current_link + '" frameborder="0" allowfullscreen></iframe>');
    
    }); 
    
    </script>
     
     
    </body>
    </html>
    - Bạn nhớ thay LINK_FILE_JQUERY, LINK_YOUTUBE_1, LINK_YOUTUBE_2 bằng các link chạy được nha, vì mình chưa post link được
    - Code đã test và chạy ngon.
    Đọc truyện chữ | truyengiaitri .info

  7. #7
    Tham gia
    07-11-2008
    Bài viết
    345
    Like
    2
    Thanked 2 Times in 1 Post
    Quote Được gửi bởi vchweb View Post
    - Trong code bạn gõ sai vài chổ, và các đoạn jquery, bạn nên để ở phía dưới và trên tag </body> nhé.
    - Bạn lấy code mình đã làm lại (chạy được)

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head> 
    	<meta charset="utf-8">
    
    </head>
    
    <body>
    <div id='video_container'>
    	
    </div>
    
    <div>
    <a class='btn_video' href='#' valuemember = 'LINK_YOUTUBE_1'>VIDEO_1</a> 
    <a class='btn_video' href='#' valuemember = 'LINK_YOUTUBE_2'>VIDEO_2</a> 
    </div>
    
    <script src="LINK_FILE_JQUERY"></script>
    
    <script type="text/javascript"> 
    $('.btn_video').on("click",function(){
    
    	var current_link = $(this).attr('valuemember');
    
    	$('#video_container').html('<iframe width="560" height="315" src="'+ current_link + '" frameborder="0" allowfullscreen></iframe>');
    
    }); 
    
    </script>
     
     
    </body>
    </html>
    - Bạn nhớ thay LINK_FILE_JQUERY, LINK_YOUTUBE_1, LINK_YOUTUBE_2 bằng các link chạy được nha, vì mình chưa post link được
    - Code đã test và chạy ngon.
    Code chạy ngon bạn ạh. Cảm ơn bạn nhiều nhé!
    Được sửa bởi haicoseu lúc 11:07 ngày 11-11-2015

  8. #8
    Tham gia
    07-11-2008
    Bài viết
    345
    Like
    2
    Thanked 2 Times in 1 Post
    Quote Được gửi bởi vchweb View Post
    - Trong code bạn gõ sai vài chổ, và các đoạn jquery, bạn nên để ở phía dưới và trên tag </body> nhé.
    - Bạn lấy code mình đã làm lại (chạy được)

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head> 
    	<meta charset="utf-8">
    
    </head>
    
    <body>
    <div id='video_container'>
    	
    </div>
    
    <div>
    <a class='btn_video' href='#' valuemember = 'LINK_YOUTUBE_1'>VIDEO_1</a> 
    <a class='btn_video' href='#' valuemember = 'LINK_YOUTUBE_2'>VIDEO_2</a> 
    </div>
    
    <script src="LINK_FILE_JQUERY"></script>
    
    <script type="text/javascript"> 
    $('.btn_video').on("click",function(){
    
    	var current_link = $(this).attr('valuemember');
    
    	$('#video_container').html('<iframe width="560" height="315" src="'+ current_link + '" frameborder="0" allowfullscreen></iframe>');
    
    }); 
    
    </script>
     
     
    </body>
    </html>
    - Bạn nhớ thay LINK_FILE_JQUERY, LINK_YOUTUBE_1, LINK_YOUTUBE_2 bằng các link chạy được nha, vì mình chưa post link được
    - Code đã test và chạy ngon.
    Bạn ơi, mình có 1 vấn đề là mình embed video từ nhiều nguồn khác nhau, mà mỗi nguồn khác nhau thỳ code embed nó cũng khác. Như cách này thì chỉ embed đc từ Youtube thôi bạn

  9. #9
    Tham gia
    23-10-2015
    Location
    truyengiaitri.info
    Bài viết
    45
    Like
    13
    Thanked 9 Times in 8 Posts
    Quote Được gửi bởi haicoseu View Post
    Bạn ơi, mình có 1 vấn đề là mình embed video từ nhiều nguồn khác nhau, mà mỗi nguồn khác nhau thỳ code embed nó cũng khác. Như cách này thì chỉ embed đc từ Youtube thôi bạn
    - Vấn đề này bạn giải quyết như sau: tại tag a, bạn thêm vào thuộc tính valuesource (đặt tên gì cũng được), tương tự như valuemember.

    VD:

    Code:
    <a class='btn_video' href='#' valuesource = 'youtube' valuemember = 'LINK_YOUTUBE_1'>VIDEO_1</a> 
    <a class='btn_video' href='#' valuesource = 'vimeo'  valuemember = 'LINK_VIMEO_2'>VIDEO_2</a> 
    
    <script src="LINK_FILE_JQUERY"></script>
    
    <script type="text/javascript"> 
    $('.btn_video').on("click",function(){
    
    	var current_link = $(this).attr('valuemember');
            var current_source = $(this).attr('valuesource');
    
            if(current_source == 'youtube')
            {
    	           $('#video_container').html('<iframe width="560" height="315" src="'+ current_link + '" frameborder="0" allowfullscreen></iframe>');
            }
            else if(current_source == 'vimeo')
            {
    	           $('#video_container').html('code embeb iframe của vimeo');
            }
    
    }); 
    
    </script>
    Đọc truyện chữ | truyengiaitri .info

  10. #10
    Tham gia
    07-11-2008
    Bài viết
    345
    Like
    2
    Thanked 2 Times in 1 Post
    Quote Được gửi bởi vchweb View Post
    - Vấn đề này bạn giải quyết như sau: tại tag a, bạn thêm vào thuộc tính valuesource (đặt tên gì cũng được), tương tự như valuemember.

    VD:

    Code:
    <a class='btn_video' href='#' valuesource = 'youtube' valuemember = 'LINK_YOUTUBE_1'>VIDEO_1</a> 
    <a class='btn_video' href='#' valuesource = 'vimeo'  valuemember = 'LINK_VIMEO_2'>VIDEO_2</a> 
    
    <script src="LINK_FILE_JQUERY"></script>
    
    <script type="text/javascript"> 
    $('.btn_video').on("click",function(){
    
    	var current_link = $(this).attr('valuemember');
            var current_source = $(this).attr('valuesource');
    
            if(current_source == 'youtube')
            {
    	           $('#video_container').html('<iframe width="560" height="315" src="'+ current_link + '" frameborder="0" allowfullscreen></iframe>');
            }
            else if(current_source == 'vimeo')
            {
    	           $('#video_container').html('code embeb iframe của vimeo');
            }
    
    }); 
    
    </script>
    Nhưng mà ở cái field nhập liệu embed_code ấy mình toàn nhập cả đoạn embed luôn chứ ko nhập link, với lại nhiều trang chia sẻ video cái link src của nó thêm id nữa nên mình ko lấy đc mà toàn phải nhúng cả code embed của nó thôi.
    Mình thử làm như này thì nó cũng chạy :
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head> 
    	<meta charset="utf-8">
    
    </head>
    
    <body>
    <div id='video_container'>
    	<iframe width="560" height="315" src="https://www.youtube.com/embed/Gok6KAZZK1w" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div>
    <a class='btn_video' href='#video-1' valuemember = '<iframe width="560" height="315" src="https://www.youtube.com/embed/Gok6KAZZK1w" frameborder="0" allowfullscreen></iframe>'>VIDEO_1</a> 
    <a class='btn_video' href='#video-2' valuemember = '<iframe width="560" height="315" src="https://www.youtube.com/embed/sHeJHjd8QoY" frameborder="0" allowfullscreen></iframe>'>VIDEO_2</a> 
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <script type="text/javascript"> 
    $('.btn_video').on("click",function(){
    
    	var current_link = $(this).attr('valuemember');
    
    	$('#video_container').html(current_link);
    
    }); 
    
    </script>
     
     ///////////////////////////////////////
    </body>
    </html>
    Nhưng khi mình nhập liệu:
    Code:
    <div id='video_container'>
    	<iframe width="560" height="315" src="https://www.youtube.com/embed/Gok6KAZZK1w" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div>
    <a class='btn_video' href='#video-1' valuemember = '<iframe width="560" height="315" src="https://www.youtube.com/embed/Gok6KAZZK1w" frameborder="0" allowfullscreen></iframe>'>VIDEO_1</a> 
    <a class='btn_video' href='#video-2' valuemember = '<iframe width="560" height="315" src="https://www.youtube.com/embed/sHeJHjd8QoY" frameborder="0" allowfullscreen></iframe>'>VIDEO_2</a> 
    </div>
    vào khung soạn thảo của Worrdpress thì cái ký tự ' ở đằng sau </iframe> nó chuyển thành & #8216; nên ko chạy đc

Trang 1 / 2 12 LastLast

Bookmarks

Quy định

  • Bạn không thể tạo chủ đề mới
  • Bạn không thể trả lời bài viết
  • Bạn không thể gửi file đính kèm
  • Bạn không thể sửa bài viết của mình
  •