Thủ thuật wordpress

Hướng Dẫn Tích Hợp Plyr Video Player Trong WordPress

Đăng vào Tháng 9 22, 2024Tháng 9 24, 2024 bởi admin

22/09/2024

5 Phút đọc

89 Lượt xem

Đánh giá

4.1/5 - (100 bình chọn)

Trong bài viết này, chúng tôi sẽ hướng dẫn cách tích hợp Plyr Video Player vào website WordPress thông qua mã PHP. Đây là một thư viện đa phương tiện mã nguồn mở, hỗ trợ phát video từ nhiều nền tảng như YouTube, Vimeo với giao diện hiện đại và tính năng mạnh mẽ. Hãy cùng tìm hiểu từng dòng mã và cách hoạt động của nó.

Demo:

1. Tải Plyr Scripts và Styles vào WordPress

function enqueue_plyr_scripts() {
    wp_enqueue_style('plyr-css', 'https://cdn.plyr.io/3.7.8/plyr.css');
    wp_enqueue_script('plyr-js', 'https://cdn.plyr.io/3.7.8/plyr.polyfilled.js', array(), null, true);

    wp_add_inline_script('plyr-js', '
        document.addEventListener("DOMContentLoaded", function () {
            if (typeof Plyr !== "undefined") {
                document.querySelectorAll(".plyr--video").forEach(function(element) {
                    var encodedId = element.getAttribute("data-plyr-embed-id");
                    if (encodedId) {
                        var decodedId = atob(encodedId);
                        element.setAttribute("data-plyr-embed-id", decodedId);
                    }
                });
                Plyr.setup(".plyr");
            }
        });
    ');
}
add_action('wp_enqueue_scripts', 'enqueue_plyr_scripts');

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

function enqueue_plyr_scripts() {

wp_enqueue_style('plyr-css', 'https://cdn.plyr.io/3.7.8/plyr.css');

wp_enqueue_script('plyr-js', 'https://cdn.plyr.io/3.7.8/plyr.polyfilled.js', array(), null, true);

wp_add_inline_script('plyr-js', '

document.addEventListener("DOMContentLoaded", function () {

if (typeof Plyr !== "undefined") {

document.querySelectorAll(".plyr--video").forEach(function(element) {

var encodedId = element.getAttribute("data-plyr-embed-id");

if (encodedId) {

var decodedId = atob(encodedId);

element.setAttribute("data-plyr-embed-id", decodedId);

}

});

Plyr.setup(".plyr");

}

});

');

}

add_action('wp_enqueue_scripts', 'enqueue_plyr_scripts');

Giải thích:

enqueue_plyr_scripts: Đây là hàm dùng để nạp CSS và JS của Plyr từ CDN. Chúng ta sử dụng wp_enqueue_style để thêm tệp CSS và wp_enqueue_script để nạp JavaScript.
wp_add_inline_script: Đoạn mã này sẽ được chạy sau khi Plyr được tải. Nó sẽ lắng nghe sự kiện DOMContentLoaded, sau đó giải mã video ID (mã hóa bằng Base64) và khởi tạo Plyr trên các phần tử video.

2. Chuyển Đổi Video YouTube Thành Player Plyr

function convert_youtube_embed_to_plyr($html, $url, $attr, $post_id) {
    if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) {
        $video_id = preg_replace('/.*(?:youtube.com\/embed\/|youtu.be\/|youtube.com\/watch\?v=)([a-zA-Z0-9_-]+).*/', '$1', $url);
        $encoded_id = base64_encode($video_id);

        $plyr_html = '
            <div class="plyr plyr--video" data-plyr-provider="youtube" data-plyr-embed-id="' . esc_attr($encoded_id) . '">
                <div data-plyr-provider="youtube" data-plyr-embed-id="' . esc_attr($encoded_id) . '"></div>
            </div>';
        return $plyr_html;
    }
    return $html;
}
add_filter('embed_oembed_html', 'convert_youtube_embed_to_plyr', 10, 4);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function convert_youtube_embed_to_plyr($html, $url, $attr, $post_id) {

if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) {

$video_id = preg_replace('/.*(?:youtube.com\/embed\/|youtu.be\/|youtube.com\/watch\?v=)([a-zA-Z0-9_-]+).*/', '$1', $url);

$encoded_id = base64_encode($video_id);

$plyr_html = '

<div class="plyr plyr--video" data-plyr-provider="youtube" data-plyr-embed-id="' . esc_attr($encoded_id) . '">

<div data-plyr-provider="youtube" data-plyr-embed-id="' . esc_attr($encoded_id) . '"></div>

</div>';

return $plyr_html;

}

return $html;

}

add_filter('embed_oembed_html', 'convert_youtube_embed_to_plyr', 10, 4);

Giải thích:

convert_youtube_embed_to_plyr: Hàm này dùng để thay thế mã nhúng (embed) video YouTube mặc định bằng giao diện của Plyr.
- preg_replace: Đoạn mã này tách ID video YouTube từ URL.
- base64_encode: ID video được mã hóa bằng Base64 nhằm mục đích bảo mật và sau đó được giải mã khi chạy Plyr.
- Kết quả trả về là một đoạn HTML tương thích với Plyr.

3. Tùy Biến CSS Cho Plyr

function custom_plyr_css() {
    echo '
        <style>
            .plyr--video iframe {
                pointer-events: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .plyr--video {
                position: relative;
                width: 100%;
                padding-top: 56.25%;
            }
            .plyr--video .plyr__video-wrapper {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    ';
}
add_action('wp_head', 'custom_plyr_css');

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

function custom_plyr_css() {

echo '

<style>

.plyr--video iframe {

pointer-events: none;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.plyr--video {

position: relative;

width: 100%;

padding-top: 56.25%;

}

.plyr--video .plyr__video-wrapper {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

</style>

';

}

add_action('wp_head', 'custom_plyr_css');

Giải thích:

custom_plyr_css: Đây là đoạn mã CSS tùy chỉnh được nạp trực tiếp vào phần <head> của trang web.
- .plyr--video: Đảm bảo video được hiển thị với tỷ lệ 16:9 bằng cách dùng padding-top: 56.25%. Tất cả video sẽ được tối ưu hóa để khớp với kích thước màn hình.
- iframe: Vô hiệu hóa tương tác với iframe video nhằm ngăn người dùng nhấp chuột phải.

4. Vô Hiệu Hóa Chuột Phải Trên Video

function disable_right_click_script() {
    echo '
        <script>
            document.addEventListener("contextmenu", function(e) {
                if (e.target.closest(".plyr--video")) {
                    e.preventDefault();
                }
            });
        </script>
    ';
}
add_action('wp_footer', 'disable_right_click_script');

1

2

3

4

5

6

7

8

9

10

11

12

function disable_right_click_script() {

echo '

<script>

document.addEventListener("contextmenu", function(e) {

if (e.target.closest(".plyr--video")) {

e.preventDefault();

}

});

</script>

';

}

add_action('wp_footer', 'disable_right_click_script');

Giải thích:

disable_right_click_script: Đoạn mã JavaScript này chặn sự kiện nhấp chuột phải trên video Plyr, giúp ngăn người dùng tải xuống video hoặc thực hiện hành động không mong muốn.

Tổng Kết

Plyr là một công cụ mạnh mẽ giúp cải thiện trải nghiệm xem video trên website của bạn.
Bằng cách sử dụng đoạn mã trên, bạn có thể dễ dàng tích hợp Plyr vào WordPress, thay thế trình phát video mặc định và tùy chỉnh giao diện theo yêu cầu.

Để sử dụng đoạn mã này hiệu quả, hãy sao chép và dán mã vào file functions.php của theme bạn đang dùng. Điều này sẽ giúp website của bạn có một trình phát video đẹp mắt và tối ưu hóa trải nghiệm người dùng. Mã hoàn chỉnh là:

function enqueue_plyr_scripts() {
    // Plyr CSS
    wp_enqueue_style('plyr-css', 'https://cdn.plyr.io/3.7.8/plyr.css');

    // Plyr JS
    wp_enqueue_script('plyr-js', 'https://cdn.plyr.io/3.7.8/plyr.polyfilled.js', array(), null, true);

    // Custom script to initialize Plyr with decoded video ID
    wp_add_inline_script('plyr-js', '
        document.addEventListener("DOMContentLoaded", function () {
            if (typeof Plyr !== "undefined") {
                // Decode base64-encoded video IDs
                document.querySelectorAll(".plyr--video").forEach(function(element) {
                    var encodedId = element.getAttribute("data-plyr-embed-id");
                    if (encodedId) {
                        var decodedId = atob(encodedId); // Decode base64
                        element.setAttribute("data-plyr-embed-id", decodedId);
                    }
                });
                Plyr.setup(".plyr");
            }
        });
    ');
}
add_action('wp_enqueue_scripts', 'enqueue_plyr_scripts');

function convert_youtube_embed_to_plyr($html, $url, $attr, $post_id) {
    if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) {
        // Extract video ID from URL
        $video_id = preg_replace('/.*(?:youtube.com\/embed\/|youtu.be\/|youtube.com\/watch\?v=)([a-zA-Z0-9_-]+).*/', '$1', $url);

        // Base64 encode video ID for obfuscation
        $encoded_id = base64_encode($video_id);

        // Plyr-compatible HTML
        $plyr_html = '
            <div class="plyr plyr--video" data-plyr-provider="youtube" data-plyr-embed-id="' . esc_attr($encoded_id) . '">
                <div data-plyr-provider="youtube" data-plyr-embed-id="' . esc_attr($encoded_id) . '"></div>
            </div>';

        return $plyr_html;
    }
    return $html;
}
add_filter('embed_oembed_html', 'convert_youtube_embed_to_plyr', 10, 4);

function custom_plyr_css() {
    echo '
        <style>
            .plyr--video iframe {
                pointer-events: none; /* Disable interaction */
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .plyr--video {
                position: relative;
                width: 100%;
                padding-top: 56.25%; /* 16:9 aspect ratio */
            }
            .plyr--video .plyr__video-wrapper {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    ';
}
add_action('wp_head', 'custom_plyr_css');

// Disable right-click on video
function disable_right_click_script() {
    echo '
        <script>
            document.addEventListener("contextmenu", function(e) {
                if (e.target.closest(".plyr--video")) {
                    e.preventDefault();
                }
            });
        </script>
    ';
}
add_action('wp_footer', 'disable_right_click_script');

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

function enqueue_plyr_scripts() {

// Plyr CSS

wp_enqueue_style('plyr-css', 'https://cdn.plyr.io/3.7.8/plyr.css');

// Plyr JS

wp_enqueue_script('plyr-js', 'https://cdn.plyr.io/3.7.8/plyr.polyfilled.js', array(), null, true);

// Custom script to initialize Plyr with decoded video ID

wp_add_inline_script('plyr-js', '

document.addEventListener("DOMContentLoaded", function () {

if (typeof Plyr !== "undefined") {

// Decode base64-encoded video IDs

document.querySelectorAll(".plyr--video").forEach(function(element) {

var encodedId = element.getAttribute("data-plyr-embed-id");

if (encodedId) {

var decodedId = atob(encodedId); // Decode base64

element.setAttribute("data-plyr-embed-id", decodedId);

}

});

Plyr.setup(".plyr");

}

});

');

}

add_action('wp_enqueue_scripts', 'enqueue_plyr_scripts');

function convert_youtube_embed_to_plyr($html, $url, $attr, $post_id) {

if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) {

// Extract video ID from URL

$video_id = preg_replace('/.*(?:youtube.com\/embed\/|youtu.be\/|youtube.com\/watch\?v=)([a-zA-Z0-9_-]+).*/', '$1', $url);

// Base64 encode video ID for obfuscation

$encoded_id = base64_encode($video_id);

// Plyr-compatible HTML

$plyr_html = '

<div class="plyr plyr--video" data-plyr-provider="youtube" data-plyr-embed-id="' . esc_attr($encoded_id) . '">

<div data-plyr-provider="youtube" data-plyr-embed-id="' . esc_attr($encoded_id) . '"></div>

</div>';

return $plyr_html;

}

return $html;

}

add_filter('embed_oembed_html', 'convert_youtube_embed_to_plyr', 10, 4);

function custom_plyr_css() {

echo '

<style>

.plyr--video iframe {

pointer-events: none; /* Disable interaction */

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.plyr--video {

position: relative;

width: 100%;

padding-top: 56.25%; /* 16:9 aspect ratio */

}

.plyr--video .plyr__video-wrapper {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

</style>

';

}

add_action('wp_head', 'custom_plyr_css');

// Disable right-click on video

function disable_right_click_script() {

echo '

<script>

document.addEventListener("contextmenu", function(e) {

if (e.target.closest(".plyr--video")) {

e.preventDefault();

}

});

</script>

';

}

add_action('wp_footer', 'disable_right_click_script');

Chúc các bạn thành công.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Liên hệ qua Zalo Liên hệ qua Facebook Gửi Email Gọi Điện

Share code Header top đơn giản

Share code Header top đơn giản dành cho các bạn mới nhé. Code header này để dùng hiển thị các thông tin như liên hệ,...
Cách chèn thêm sản phẩm vào trong bài viết wordpress giống levantoan

Mục Lục1. Tải Plyr Scripts và Styles vào WordPress2. Chuyển Đổi Video YouTube Thành Player Plyr3. Tùy Biến CSS Cho Plyr4. Vô Hiệu Hóa Chuột...
Sharecode cách Chuyển 0đ hoặc không điền thành chữ “Liên hệ”

Nếu bạn đang quản lý một cửa hàng trực tuyến với WooCommerce và muốn thay thế giá trị “0đ” bằng chữ “Liên hệ” cho những...
Thủ thuật wordpress – Code thêm nút Edit nhanh cho Admin trên Mobile WordPress

Nếu bạn là một quản trị viên của website WordPress và đang tìm kiếm cách code thêm nút Edit nhanh cho Admin trên Mobile WordPress...
Giới thiệu tính năng Flash Sale “Đã bán bao nhiêu” giống Shopee

Nếu bạn là một người bán hàng trực tuyến trên muathemewpgiare.com và muốn tăng cường sự uy tín của cửa hàng mình, chắc chắn bạn...
Hướng Dẫn Cách Ẩn Sản Phẩm Khi Hết Thời Gian Khuyến Mãi

Nếu bạn đang tìm kiếm một giải pháp dễ dàng để ẩn sản phẩm khi hết thời gian khuyến mãi trên website của mình, bài...
Code thêm SKU tự động vào đường dẫn của sản phẩm trong WordPress

Trong bài viết này, muathemewpgiare sẽ cùng tìm hiểu cách tự động thêm SKU vào đường dẫn sản phẩm trong WordPress, code thêm SKU tự...
Thêm trường số điện thoại, xoá trường email, website và chống spam bình luận bài viết

Trong quá trình phát triển website, việc quản lý bình luận từ người dùng là một phần quan trọng để duy trì tính tương tác...
Cách Code Fake Số Lượng Hàng Đã Bán Trong Woocommerce (Không Cần Plugin)

Khi phát triển trang thương mại điện tử với Woocommerce trên nền tảng WordPress, ngoài việc cung cấp đầy đủ thông tin sản phẩm như...
Sharecode chức năng đăng nhập gần nhất và cột ngày đăng ký tài khoản

Mục Lục1. Tải Plyr Scripts và Styles vào WordPress2. Chuyển Đổi Video YouTube Thành Player Plyr3. Tùy Biến CSS Cho Plyr4. Vô Hiệu Hóa Chuột...
Sharecode HTML và CSS Bảng Báo Giá

DEMO: Thiết kế Website Cơ bản 5,000,000đ Thiết kế website chuẩn SEO Giao diện responsive Tích hợp cơ bản (Form liên hệ, Bản đồ) Tư...
Sharecode plugin bộ lọc khoảng giá cho wordpress không cần plugin

Khi xây dựng một website WordPress, việc cung cấp công cụ tìm kiếm hiệu quả cho người dùng là rất quan trọng, đặc biệt là...
Sharecode slider sản phẩm đã xem wordpress

Mục Lục1. Tải Plyr Scripts và Styles vào WordPress2. Chuyển Đổi Video YouTube Thành Player Plyr3. Tùy Biến CSS Cho Plyr4. Vô Hiệu Hóa Chuột...
Tự Động Cập Nhật Hình Đại Diện Cho Bài Viết Trong WordPress

Hình đại diện (thumbnail) cho bài viết trong WordPress là yếu tố quan trọng giúp tăng tính thẩm mỹ và tạo điểm nhấn trực quan...
Share code hiển thị bài viết theo danh mục trong widget

Hướng dẫn chi tiết tạo Widget hiển thị bài viết theo danh mục trong WordPress là một phần quan trọng giúp tối ưu hóa trải...
Cách Thêm Ô Tìm Kiếm Danh Mục (Category) Trong WordPress

Bạn đã bao giờ cảm thấy mệt mỏi khi phải lục tung hàng tá danh mục trong WordPress mỗi khi đăng bài hay sản phẩm...

Để lại một bình luận Hủy

Bạn phải đăng nhập để gửi bình luận.