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

**haicoseu** · 09-11-2015 10:06

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

**imahappycoder** · 09-11-2015 22:39

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.

**vchweb** · 10-11-2015 15:00

Được gửi bởi haicoseu

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')
});

**haicoseu** · 10-11-2015 22:44

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>

**haicoseu** · 10-11-2015 22:47

@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

**vchweb** · 11-11-2015 10:21

- 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.

**haicoseu** · 11-11-2015 10:50

Được gửi bởi vchweb

- 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é!

**haicoseu** · 12-11-2015 01:43

Được gửi bởi vchweb

- 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

**vchweb** · 12-11-2015 09:47

Được gửi bởi haicoseu

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>

**haicoseu** · 12-11-2015 10:57

Được gửi bởi vchweb

- 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

Chủ đề: Cần giúp đỡ load content bằng ajax

Hỗ trợ

Rate This Thread

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

Bookmarks

Bookmarks

Quy định