[WordPress] 外掛分享： HLS Player

前言介紹

  • 這款 WordPress 外掛「HLS Player」是 2024-05-30 上架。
  • 目前有 400 個安裝啟用數。
  • 上一次更新是 2024-11-26，距離現在已有 157 天。
  • 外掛最低要求 WordPress 6.4 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 8.1 以上。
  • 有 1 人給過評分。
  • 論壇上目前有 1 個提問，問題解答率 100% ，不低，算是個很有心解決問題的開發者團隊了！

外掛協作開發者

r00tsector |

外掛標籤

hls | videojs | streaming | video player | video embedding |

內容簡介

總結：使用 HLS Player Video Plugin 外掛可以在WordPress上整合和嵌入HLS視頻，擁有出色的觀看體驗。這個外掛擁有許多特點，包括容易集成、適應性設計、通用兼容性、視覺吸引力、立即播放、設置備用選項、簡單安裝等。

問題與答案：
1. 如何輕鬆將HLS視頻嵌入網站中？
使用HLS Player Video Plugin外掛，只需輕鬆整合即可輕鬆將HLS視頻嵌入網站中。
2. 這個外掛支持哪些特性以確保在所有設備上都有無縫的觀看體驗？
它支持自適應設計、全面的HTML5支持以及自動播放等功能。
3. 可以從哪些地方定制外掛以獲得更具吸引力的外觀？
你可以自訂視頻海報，設定多個格式的HTML5視頻，以及加入標題和字幕等。
4. 如何應對外部視頻文件的嵌入需求？
這個外掛設計有彈性，可以輕鬆地嵌入本地和外部的.m3u8或.mpd格式的HLS文件。
5. 如何開始使用這個外掛而不涉及到繁瑣複雜的配置？
只需簡單的安裝步驟，即可輕鬆開始使用這個外掛，無需複雜的配置。

原文外掛簡介

HLS Player Video Plugin: Streamline your WordPress with the definitive HLS video embedding solution. Powered by the acclaimed Video.js player, this plugin guarantees an exceptional viewing experience.
Key Features:
* Effortless Integration: Embed HLS videos anywhere on your site with ease.
* Adaptive Design: Provides a seamless viewing experience on all devices.
* Universal Compatibility: Ensures full HTML5 support across all browsers.
* Visual Appeal: Customize with video posters for an engaging look.
* Instant Play: Auto-playback for immediate engagement.
* Backup Options: Embed fallback videos directly from your media library.
* Simple Installation: Get started quickly without complex configurations.
* Performance-Focused: Lightweight build for fast site performance.
* Modern Interface: Enjoy a sleek, watermark-free video player.
* Versatile Playback: Supports a range of HTML5 video formats.
* Accessibility Features: Include captions and subtitles for a wider audience.
* Multilingual Support: Offers captions in various languages.
* Designed for flexibility, the WordPress HLS Player Plugin simplifies embedding both local and external .m3u8 or .mpd HLS files. It’s tailored for both responsive and fixed-width layouts, ensuring a straightforward embedding process.
Elevate your WordPress site with the HLS Player Video Plugin – the pinnacle of professional-grade video streaming.
HLS Player Plugin Usage
To embed a video, create a new post/page and use the following shortcode:
[hls_player url="https://example.com/path/to/video_playlist.m3u8"]

Specify the “url” parameter with the location of the HLS video package file. Supported formats include .m3u8 (application/x-mpegURL), .mpd (application/dash+xml), and .mp4 (video/mp4).
Video Shortcode Options
General Options
class: Define the Video.js player’s CSS class (Default: video-js). Additional classes listed at https://videojs.com/guides/layout/#classes
[hls_player url="https://example.com/path/to/video_playlist.m3u8" class="video-js vjs-fluid vjs-16-9"]

width: Defines the width of the video file.
[hls_player url="https://example.com/path/to/video_playlist.m3u8" width="480"]

height: Defines the height of the video file.
[hls_player url="https://example.com/path/to/video_playlist.m3u8" height="264"]

controls: Specify whether video controls should be displayed (Default: “true”). Use “false” to hide controls. When you disable controls users will not be able to interact with your videos. So It is recommended that you enable autoplay for a video with no controls.
[hls_player url="https://example.com/path/to/video_playlist.m3u8" controls="false"]

preload: Specify how the video should be loaded when the page loads (Default: “auto”). Options include “metadata,” “none,” and “auto.”
“metadata” – Load only the meta data of the video, which includes information like the duration and dimensions of the video. Sometimes, the meta data will be loaded by downloading a few frames of video.
“none” – Don’t preload any data. The browser will wait until the user hits “play” to begin downloading.
[hls_player url="https://example.com/path/to/video_playlist.m3u8" preload="metadata"]

autoplay: Cause the video to play automatically when the page loads. Instead of using the autoplay attribute you maybe need to pass an autoplay option to videojs_custom_options_json. https://videojs.com/guides/options/#autoplay
[hls_player url="https://example.com/path/to/video_playlist.m3u8" autoplay="true"]

loop: Make the video loop to the beginning when finished and automatically continue playing.
[hls_player url="https://example.com/path/to/video_playlist.m3u8" loop="true"]

poster: Define an image as a placeholder before the video plays.
[hls_player url="https://example.com/path/to/video_playlist.m3u8" poster="http://example.com/wp-content/uploads/poster.jpg"]

muted: Specify that the audio output of the video should be muted.
[hls_player url="https://example.com/path/to/video_playlist.m3u8" muted="true"]

captions: Add captions or subtitles to the video in multiple languages. Provide the captions in the format:
"path/to/captions1.vtt|lang1|label1|default,path/to/captions2.vtt|lang2|label2"

path/to/captions: The URL or path to the VTT file containing the subtitles.
lang: The two-character language code, followed by a hyphen and an optional country code (e.g., en, de, en-US, de-DE).
label: A user-friendly label for the caption (e.g., “English”, “German”).
default: (Optional) Use this keyword to specify which caption should be enabled by default when the video is loaded.
[hls_player url="https://example.com/path/to/video_playlist.m3u8" captions="https://example.com/path/to/captions-en.vtt|en-EN|English|default,https://example.com/path/topath/to/captions-de.vtt|de-de|German"]

videojs_custom_options_json: JSON format string for custom options (https://videojs.com/guides/options/) for the video.js player.
[hls_player url="https://example.com/path/to/video_playlist.m3u8" videojs_custom_options_json='{"autoplay": "muted"}']
or
[hls_player url="https://example.com/path/to/video_playlist.m3u8" videojs_custom_options_json='{"autoplay": true,"liveui": true,"liveTracker": {"trackingThreshold": 8}}']

Get more advanced features with HLS Player PRO
AWS CloudFront Integration
=> Global Reach: Utilize the expansive AWS CloudFront network for low-latency streaming across the globe.
=> Enhanced Security: Protect your content with CloudFront Signed Cookies, ensuring that only authorized viewers can access your videos. This feature is particularly useful for preventing unauthorized sharing and downloads, as it ties the video access to specific, signed cookies that are difficult to replicate or redistribute.
=> Simplified Configuration: Follow our easy-to-understand instructions to set up CloudFront and implement signed cookies, making your videos secure and your setup hassle-free.
AWS Kinesis Video Streams Integration
=> Flexible Streaming: Leverage AWS Kinesis Video Streams for both live and on-demand video streaming.
=> Direct Downloads: Enable users to download clips directly from the player, enhancing the viewer experience.
Subscription Management
=> Integrated Solution: Combine aMember and WordPress roles for efficient subscription management.
=> Exclusive Content: Offer videos exclusively to active subscribers, adding value to your membership packages.
Analytics Integration
=> In-depth Tracking: Support for Google Tag Manager and Google Analytics allows you to monitor detailed video statistics.
=> Viewer Insights: Gain insights into playback duration and user engagement, helping you to optimize your content strategy.
Streaming Optimization
=> Effortless Conversion: Transform .mp4 files into the .m3u8 format with ease, using our tools for Windows or macOS.
=> Comprehensive Guides: Benefit from our in-depth guides for video file conversion, AWS S3 and CloudFront configuration and AWS Kinesis Video Stream integration, ensuring a smooth setup process.
Check out HLS Player PRO >

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「HLS Player」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | 1.0.6 | 1.0.7 | 1.0.8 | 1.0.9 | trunk | 1.0.10 | 1.0.11 |

延伸相關外掛（你可能也想知道）

  • Tutor LMS BunnyNet Integration 》BunnyNet CDN 提供無緩衝高速串流，可以從世界任何地方輕鬆實現。這是通過他們的高級串流解決方案 Bunny Stream 實現的。Bunny Stream 使用先進的 CDN 存儲並...。
  • Broadcast Live Video – Live Streaming : WebRTC, HLS, RTSP, RTMP 》這個外掛提供了完整的功能，讓網站使用者可以透過多種來源（電腦攝像頭、IP 相機、視頻播放列表、iOS/Android 和桌面編碼器應用程式）建立現場直播頻道。現場...。
  • RSS Feed Pro 》WordPress附帶預設的全站RSS訂閱，但當涉及到播客時，它並不足夠，在播客中，它僅分享博客文章。RSS Feed Pro是一款功能完整的播客外掛，設計適合初學者和高...。
  • Media Playback Speed 》這個簡短、實用的外掛程式會為使用 mediaelement.js 內建 WordPress 短碼所加入的音訊、影片和播放清單元素添加播放按鈕。, 每組按鈕都針對頁面上的相應元素...。
  • Chatroll Live Chat 》在WordPress或BuddyPress 的側邊欄、文章和頁面上添加即時聊天。Chatroll 可完全自定義，以適應您網站的設計。, 外掛程式亮點：, 使用簡單, , 持續的、即時的...。
  • WPRadio – WordPress Radio Streaming Plugin 》WordPress Radio 是唯一一個能在 WordPress 網站中創建整個廣播流平台的 WordPress 外掛程式。, 它使用Caster.fm API，讓您可以創建一個互聯網電台，提供流媒...。
  • Cloudflare Stream Video 》, 封鎖本地播放器, 多種播放選項, 使用獨特的 URL 或嵌入代碼分發視頻, 按分鐘計價, 自適應比特率串流, 包括視頻存儲, 可通過 Webhooks 整合工作流程, 支援 R...。
  • Spotlightr 》上傳、加密並發布您的影片，使用您自己的品牌，並在任何您喜歡的地方託管檔案。, 這是唯一支援您的課程、行銷鉤種和預算的影片託管。, 我們的託管服務自動產...。
  • WooCommerce HSS Extension for Streaming Video 》3 個簡單步驟開始運作！, , 在HostStreamSell.com註冊免費試用帳戶, 上傳、編碼和組織您的影片, 在您的網站上安裝 WooCommerce 和我們的 WooCommerce 整合外...。
  • Playerzbr 》美式英文, PlayerZBR外掛允許使用者在 HTML 5 中添加播放器，使用您的流媒體網址、網路電台和音樂家理想的網站。, 以 HTML 5 製作，旨在獲得更好的使用者效能...。
  • Mux Video Uploader 》總結：2Coders整合Mux影片是WordPress的首選整合方法，使影片上傳和串流變得輕鬆。通過在WordPress中無縫結合2Coders整合Mux影片，您可以大幅提升網站的影片...。
  • HSS Embed Streaming Video 》這款外掛可透過簡單的短代碼(embed short code)，輕鬆嵌入您在 HostStreamSell 平台上提供的影片試播版或完整版，非常適合會員制網站，將連結放在受保護的文...。
  • Embed Tidal 》支援：, , 曲目, 專輯, 播放清單, 影片, 帶有相關內容的影片, , 您可以像在 YouTube 视频中一样粘贴 URL，以任何网络播放器支持的形式。 例如：, , https://l...。
  • Roku Direct Publisher 》透過 Direct Publisher 節目，為 Roku 策展精選內容。。
  • Where to Watch – Publisher's Widget 》沒有 WordPress 的網站嗎？ Reelgood Publisher's Widget 也提供 Javascript Bundle 或 API 版本。請填寫這個表格以瞭解更多資訊。, 透過 Reelgood Publisher...。

文章
Filter
Apply Filters
Close
Mastodon