jekyll
  • jekyll (SV!)  [Off]
  • Từng có những ngày tháng tuyệt vời đến thế…
 24 thág 10, 06:52

Hàm getytb


Hàm này dùng để get url video youtube chất lượng 360p.

Cú pháp của func cũng khá là đơn giản như sau, ae có thể dùng
  1. <getytb>id_video_youtube</getytb>

hoặc là
  1. <ytb>id_video_youtube</ytb>

Và ae có thể thay đổi ký tự < trở thành [ linh hoạt.

Sau đây là 1 đoạn template mà mình đã áp dụng với func này.

Thư mục public_html/post
Mở tệp _category xóa hết code cũ, thay thế bằng đoạn:
  1. <member>
  2. [post]<script language="javascript" type="text/javascript">
  3. window.location.href="/_category/<uri:3>";</script><META HTTP-EQUIV="Refresh" CONTENT="0;URL=/_category/<uri:3>">[/post]
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
  5. <form id="uyoutube" action="" method="post">
  6. <div class="phdr">Gửi bài viết</div>
  7.      <div class="menu">Category: $f->title</div>  
  8. <form action="" method="post">
  9.        <div class="menu"><b><i class="fa fa-link" aria-hidden="true"></i></b> URL bài viết gốc:<br/>
  10.        <input class="form-control" type="text" id="fileInput" style="height:100%;"> <button type="button" onclick="getYoutube()" class="sacmau1"><b>Get video</b><buttton>
  11. </div>
  12. <div class="menu">
  13.       <div>Tiêu đề của video<i class="bar"></i></div>
  14.       <input type="text" name="title" value="" required="required" id="title" placeholder=""/>
  15.     </div>
  16. <div class="menu">
  17.       <div>Ảnh đại diện <i class="bar"></i></div>
  18.       <input type="text" name="thumbnail" value="" required="required" id="thumbnail" placeholder=""/>
  19.     </div>
  20. <div class="menu">
  21.       <div>ID của video<i class="bar"></i></div>
  22.       <input type="text" id="autoztextarea" name="code" value="" required="required" placeholder=""/>
  23.     </div>
  24. <div class="menu" align="center"><button type="submit" name="submit" class="sacmau1"><b>Lưu lại</b><buttton></div>
  25. </form>
  26.  
  27.  
  28. <script>
  29. function getYoutube() {
  30. var videoid = $('#fileInput').val();
  31. var matches = videoid.match(/^https?:\/\/www\.youtube\.com\/.*[?&]v=([^&]+)/i) || videoid.match(/^https?:\/\/m\.youtube\.com\/.*[?&]v=([^&]+)/i) || videoid.match(/^https?:\/\/youtu\.be\/([^?]+)/i);
  32. if (matches) {
  33.   videoid = matches[1];
  34.   $.getJSON('/youtube/data.json?id='+videoid, function(data) {  
  35. if (data[360]!=''){
  36.   let url = 'https://www.googleapis.com/youtube/v3/videos?key=<include:apikey>&part=snippet,statistics&id='+videoid;
  37.   fetch(url)
  38.   .then(res => res.json())
  39.   .then(body => {
  40.            var data = JSON.parse(JSON.stringify(body));
  41.            var title = data.items[0].snippet.title;
  42.            var thumbnail = 'https://img.youtube.com/vi/'+videoid+'/0.jpg';
  43.            $("#title").val(title);
  44.            $("#thumbnail").val(thumbnail);
  45.            $("#autoztextarea").val(videoid);
  46.          })
  47.   .catch(err => { throw err });
  48. } else {alert('Không thể get URL video')}
  49.   });
  50. }
  51. else {
  52.   alert("Đây không phải link Youtube!");
  53.   $('#fileInput').val("");
  54.   return;
  55. }
  56.  
  57.  
  58. }
  59. </script>
  60. </form>
  61. </member>

Tệp _blog:
  1. <div class="phdr">Chỉnh Sửa Bài Viết</div>
  2. [rights >= 3]
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
  4. <edit:post>$ketqua</edit>
  5. <form id="uyoutube" action="" method="post">
  6.        <div class="menu"><b><i class="fa fa-link" aria-hidden="true"></i></b> URL bài viết gốc:<br/>
  7.        <input class="form-control" type="text" id="fileInput" style="height:100%;" value="https://www.youtube.com/watch?v=$f->content"> <button type="button" onclick="getYoutube()" class="sacmau1"><b>Get video</b><buttton>
  8. </div>
  9. <div class="menu">
  10.       <div>Tiêu đề của video<i class="bar"></i></div>
  11.       <input type="text" name="title" value="$f->title" required="required" id="title" placeholder=""/>
  12.     </div>
  13. <div class="menu">
  14.       <div>Ảnh đại diện <i class="bar"></i></div>
  15.       <input type="text" name="thumbnail" value="$f->thumbnail" required="required" id="thumbnail" placeholder=""/>
  16.     </div>
  17. <div class="menu">
  18.       <div>ID của video<i class="bar"></i></div>
  19.       <input type="text" id="autoztextarea" name="code" value="$f->content" required="required" placeholder=""/>
  20.     </div>
  21. <div class="menu" align="center"><button type="submit" name="submit" class="sacmau1"><b>Lưu lại</b><buttton></div>
  22. </form>
  23.  
  24.  
  25. <script>
  26. function getYoutube() {
  27. var videoid = $('#fileInput').val();
  28. var matches = videoid.match(/^https?:\/\/www\.youtube\.com\/.*[?&]v=([^&]+)/i) || videoid.match(/^https?:\/\/m\.youtube\.com\/.*[?&]v=([^&]+)/i) || videoid.match(/^https?:\/\/youtu\.be\/([^?]+)/i);
  29. if (matches) {
  30.   videoid = matches[1];
  31.   let url = 'https://www.googleapis.com/youtube/v3/videos?key=<include:apikey>&part=snippet,statistics&id='+videoid;
  32.   fetch(url)
  33.   .then(res => res.json())
  34.   .then(body => {
  35.            var data = JSON.parse(JSON.stringify(body));
  36.            var title = data.items[0].snippet.title;
  37.            var thumbnail = 'https://img.youtube.com/vi/'+videoid+'/0.jpg';
  38.            $("#title").val(title);
  39.            $("#thumbnail").val(thumbnail);
  40.            $("#autoztextarea").val(videoid);
  41.          })
  42.   .catch(err => { throw err });
  43. }
  44. else {
  45.   alert("Đây không phải link Youtube!");
  46.   $('#fileInput').val("");
  47.   return;
  48. }
  49.  
  50.  
  51. }
  52. </script>
  53. </form>
  54. [/rights]
  55. [rights <= 2]<div class="list1">Vui lòng liên hệ với Admin để được cấp quyền sửa bài nhé!</div>[/rights]


Tạo thư mục youtube
Tạo tệp data.json
  1. {
  2.    "360":"[getytb]<get:id>[/getytb]"
  3. }


Tại Thư mục public_html

- Tệp index:
  1. <div class="phdr"><i class="fa fa-youtube-play" aria-hidden="true"></i> Top Video Mới</div>
  2. <if:$total->post == 0><div class="list1">Chưa có video nào được chia sẻ</div></if>
  3. [if:$total->post != 1]<div class="vList"><ul style="list-style-position:outside;margin:0;padding:0;list-style-type:none" class="list-movies">[/if]
  4. <blog:24>
  5. <li class="item-movie"><a title="$title" href="$url"><div class="image"><div class="movie-play"><div class="movie-thumbnail" style="background-image:url('$thumbnail')"></div><span class="cripple"></span></div></div><div class="title-movie">$title</div></a></li>
  6. </blog>
  7. [if:$total->post != 1]</ul></div>[/if]
  8. <div class="phdr"><i class="fa fa-bars"></i> Chuyên Mục</div>
  9. <if:$total->category == 0><div class="list1">Chưa có chuyên mục nào được tạo</div></if>
  10. <category:10>
  11. <div class="list1"><a href="$url" title="$title"><i class="fa fa-cube" aria-hidden="true"></i> $title</a></div>
  12. </category>

- Tệp _blog:
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
  2. <div class="phdr"><b><i class="fa fa-cube" aria-hidden="true"></i> <a href="/$category->url" title="$category->title">$category->title</a></b>
  3. </div>
  4. <if('[getytb]$f->content[/getytb]'=='')><style>.youtubeShow{max-height: 500px;height: auto;width: auto;}
  5. </style>
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.7/plyr.min.css" />
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.7/plyr.min.js"></script></if>
  8. <center>
  9. <div class="menu">
  10. <if('[getytb]$f->content[/getytb]'=='')><div id="player" data-plyr-provider="youtube" data-plyr-embed-id="$f->content"></div>
  11. <script>const player = new Plyr('#player');</script></if><if('[getytb]$f->content[/getytb]'!='')><video style="width:100%;height:100%" poster="https://img.youtube.com/vi/$f->content/0.jpg" preload="auto" controls autoplay style="z-index:999999999;position:relative;outline:none"><source src="[getytb]$f->content[/getytb]" type="video/mp4"></video></if>
  12. </div>
  13. <div class="menu"><h2 class="fix">$f->title</h2></div>
  14. <div class="menu">
  15. <table width="100%"><tbody><tr><td align="left"><b><span class="cYtb" id="channelTitle"></span></b></td><td align="right"><a href="https://www.y2mate.com/youtube/$f->content"><button class="google"><b><i class="fa fa-download" aria-hidden="true"></i> Tải video</b></button></td></tr></tbody></table>
  16. </div>
  17. <!---<div id="description" class="menu"></div>--->
  18. <script>
  19. $.getJSON('https://www.googleapis.com/youtube/v3/videos?key=<include:apikey>&part=snippet,statistics&id=$f->content', function(data) {  $('#viewCount').append(data.items[0].statistics.viewCount);
  20. $('#channelTitle').append(data.items[0].snippet.channelTitle);
  21. $('#description').append(data.items[0].snippet.description);
  22.   });
  23. </script>
  24. </center>
  25.  
  26. <div class="phdr"><i class="fa fa-share-alt-square" aria-hidden="true"></i> Chia sẻ</div>
  27. <div class="menu">
  28. <table style="border: none;">
  29.   <tr>
  30.     <td>Link</td>
  31.     <td><input type="text" value="$f->url"></td>
  32.   </tr>
  33.   <tr>
  34.     <td>BBCode</td>
  35.     <td><input type="text" value="[youtube]https://www.youtube.com/watch?v=$f->content[/ youtube]"></td>
  36.   </tr>
  37.   <tr>
  38.     <td>Markdown</td>
  39.     <td><input type="text" value="{youtube:https://www.youtube.com/watch?v=$f->content}"></td>
  40.   </tr>
  41. </table>
  42. </div>

- Tệp _category:
  1. <div class="phdr"><b><i class="fa fa-cube" aria-hidden="true"></i> $f->title</b></div>
  2. <member><div class="list1"><a href="/post/<uri>" title="Thêm video mới"><button class="google">Thêm video mới</button></a></div></member>
  3. [if:$total->post == 0]<div class="menu">Chưa có bài viết nào trong chuyên mục này</div>[/if]
  4. [if:$total->post != 0]<div class="vList"><ul style="list-style-position:outside;margin:0;padding:0;list-style-type:none" class="list-movies">[/if]
  5. <blog:24>
  6. <li class="item-movie"><a title="$title" href="$url"><div class="image"><div class="movie-play"><div class="movie-thumbnail" style="background-image:url('$thumbnail')"></div><span class="cripple"></span></div></div><div class="title-movie">$title</div></a></li>
  7. </blog>
  8. [if:$total->post != 0]</ul></div>[/if]
  9. <if:$total->category >= 1><div class="phdr">Chuyên Mục</div></if>
  10. <category:10>
  11. <div class="list1"><img src="http://sacmau.mobi/images/folder.png" style="width:20px; height:20px"> <a href="$url" title="$title">$title</a></div></category>


- Tạo tệp apikey, điền API key youtube v3 mà ae đã tạo, và lưu lại.

- CSS:
  1. http://hyde.sacmau.mobi/default.css


Demo: http://hyde.sacmau.mobi/_blog/ ... o-hoa

Chú thích
- <get:id> là func cho phương thức GET
- <uri:1> là func trả về phân đoạn uri thứ nhất
- Uri segments: <uri:num>
- Hiển thị toàn bộ phân đoạn uri: <uri>

- <include:apikey> là func chèn tệp apikey từ thư mục public_html
- Cú pháp func: <include:taptin>
- Chèn từ thư mục khác: <include:thumuc/taptin>

- <if('[getytb]$f->content[/getytb]'=='')></if> là func điều kiện với toán tử ==
- <if('[getytb]$f->content[/getytb]'=='')></if> -> Nếu không get được URL video thì hiển thị.
- <if('[getytb]$f->content[/getytb]'!='')></if> -> Nếu get được URL video thì hiển thị.

- Ae lấy API key youtube v3 từ hướng dẫn này
Đã chỉnh sửa
  • AdminAdmin
  • Admin đã bày tỏ cảm xúc.
jekyll
jekyll
jekyll
  • Vòng lặp [2]
  • jekyll / hyde (Chủ Nhật lúc 20:19)
jekyll
  • Hàm ago [1]
  • jekyll / jekyll (Thứ Sáu 26 thág 11, 11:38)
jekyll
  • Hàm rank [1]
  • jekyll / jekyll (Thứ Tư 24 thág 11, 09:50)
jekyll
jekyll
jekyll
  • Hàm inbox [1]
  • jekyll / jekyll (Chủ Nhật 21 thág 11, 09:01)
jekyll
  • Hàm timeon [1]
  • jekyll / jekyll (Thứ Hai 15 thág 11, 16:58)
1 2 3 ... 5 >

Cộng Đồng SMM

Function [32]
Các hàm sử dụng trên SMM
Template [8]
Chia sẻ template

Danh Sách Wapsite

1 2 3 ... 5 >
Thông Tin

Wapbuilder hỗ trợ tạo wapsite nhanh chóng mà không cần quá nhiều khiến thức lập trình

Hệ Thống đang trong quá trình hoàn thiện

Hỗ Trợ

[email protected]

Admin SMM

42 Đường Số 17, Phường Tân Thuận Tây, Quận 7, Tp.HCM

Liên Kết

Đặt Liên Kết

Lưu Trữ Tập Tin