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

imahappycoder viết 15:42 ngày 10/10/2018

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 viết 15:44 ngày 10/10/2018

Đượ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 viết 15:42 ngày 10/10/2018

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 viết 15:49 ngày 10/10/2018

@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 viết 15:40 ngày 10/10/2018

- 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 viết 15:46 ngày 10/10/2018

Đượ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 viết 15:47 ngày 10/10/2018

Đượ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 viết 15:40 ngày 10/10/2018

Đượ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 viết 15:39 ngày 10/10/2018

Đượ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

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

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI