Changeset 3109826
- Timestamp:
- 06/29/2024 10:48:53 PM (21 months ago)
- Location:
- hls-player
- Files:
-
- 8 edited
- 1 copied
-
tags/1.0.8 (copied) (copied from hls-player/trunk)
-
tags/1.0.8/Readme.txt (modified) (4 diffs)
-
tags/1.0.8/hls-player.php (modified) (6 diffs)
-
tags/1.0.8/public/js/hls-player.js (modified) (2 diffs)
-
tags/1.0.8/public/js/hls-player.min.js (modified) (1 diff)
-
trunk/Readme.txt (modified) (4 diffs)
-
trunk/hls-player.php (modified) (6 diffs)
-
trunk/public/js/hls-player.js (modified) (2 diffs)
-
trunk/public/js/hls-player.min.js (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
hls-player/tags/1.0.8/Readme.txt
r3106153 r3109826 4 4 Donate link: https://donate.stripe.com/5kA7w2bRl3KN7qU3cd 5 5 Requires at least: 6.4 6 Tested up to: 6.5. 46 Tested up to: 6.5.5 7 7 Requires PHP: 8.1 8 Stable tag: 1.0. 78 Stable tag: 1.0.8 9 9 License: GPLv3 10 10 License URI: https://www.gnu.org/licenses/gpl-3.0 … … 33 33 Elevate your WordPress site with the HLS Player Video Plugin – the pinnacle of professional-grade video streaming. 34 34 35 = HLS Player Plugin Usage=35 == HLS Player Plugin Usage == 36 36 37 37 To embed a video, create a new post/page and use the following shortcode: 38 38 39 `[hls_player url="https://example.com/ external/xxxxxxxxx.m3u8"]`39 `[hls_player url="https://example.com/path/to/video_playlist.m3u8"]` 40 40 41 41 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). … … 43 43 = Video Shortcode Options = 44 44 45 The shortcode supports the following options: 45 ### General Options 46 46 47 * **class**: Define the Video.js player's CSS class (Default: video-js). Additional classes listed at https://videojs.com/guides/layout/#classes 48 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" class="video-js vjs-fluid vjs-16-9"]` 47 **class**: Define the Video.js player's CSS class (Default: video-js). Additional classes listed at https://videojs.com/guides/layout/#classes 49 48 50 * **width**: Defines the width of the video player. 51 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" width="480"]` 49 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" class="video-js vjs-fluid vjs-16-9"]` 52 50 53 * **height**: Defines the height of the video player. 54 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" height="264"]` 51 **width**: Defines the width of the video file. 55 52 56 * **controls**: Specify whether video controls should be displayed (Default: "true"). Use "false" to hide controls. 57 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" controls="false"]` 58 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. 53 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" width="480"]` 59 54 60 * **preload**: Specify how the video should be loaded when the page loads (Default: "auto"). Options include "metadata," "none," and "auto." 61 - "metadata" - Load only the metadata of the video, which includes information like the duration and dimensions of the video. Sometimes, the metadata will be loaded by downloading a few frames of video. 62 - "none" - Don't preload any data. The browser will wait until the user hits "play" to begin downloading. 63 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" preload="metadata"]` 55 **height**: Defines the height of the video file. 64 56 65 * **autoplay**: Cause the video to play automatically when the page loads. 66 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" autoplay="true"]` 57 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" height="264"]` 67 58 68 * **loop**: Set the video to automatically loop back to the beginning and continue playing after it finishes. 69 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" loop="true"]` 59 **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. 70 60 71 * **poster**: Define an image as a placeholder before the video plays. 72 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" poster="http://example.com/wp-content/uploads/poster.jpg"]` 61 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" controls="false"]` 73 62 74 * **muted**: Specify that the audio output of the video should be muted. 75 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" muted="true"]` 63 **preload**: Specify how the video should be loaded when the page loads (Default: "auto"). Options include "metadata," "none," and "auto." 64 "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. 65 "none" - Don't preload any data. The browser will wait until the user hits "play" to begin downloading. 76 66 77 * **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"`. 67 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" preload="metadata"]` 68 69 **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 70 71 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" autoplay="true"]` 72 73 **loop**: Make the video loop to the beginning when finished and automatically continue playing. 74 75 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" loop="true"]` 76 77 **poster**: Define an image as a placeholder before the video plays. 78 79 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" poster="http://example.com/wp-content/uploads/poster.jpg"]` 80 81 **muted**: Specify that the audio output of the video should be muted. 82 83 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" muted="true"]` 84 85 **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"`. 78 86 provide the lang in two character language code format. For example de-de, en-us 79 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" captions="path/to/captions-en.vtt|en-EN|English,path/to/captions-es.vtt|en-us|English|default"]` 87 88 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" captions="path/to/captions-en.vtt|en-EN|English,path/to/captions-es.vtt|en-us|English|default"]` 89 90 **videojs_custom_options_json**: JSON format string for custom options (https://videojs.com/guides/options/) for the video.js player. 91 92 ` 93 [hls_player url="https://example.com/path/to/video_playlist.m3u8" videojs_custom_options_json='{"autoplay": "muted"}'] 94 or 95 [hls_player url="https://example.com/path/to/video_playlist.m3u8" videojs_custom_options_json='{"autoplay": true,"liveui": true,"liveTracker": {"trackingThreshold": 8}}'] 96 ` 80 97 81 98 == Get more advanced features with HLS Player PRO == 82 99 83 AWS CloudFront Integration: 84 => Global low-latency content delivery network support.85 => Secure videos with CloudFront Signed Cookies against unauthorized downloads.86 => Easy setup with step-by-step instructions for configuring CloudFront and signed cookies.100 === **AWS CloudFront Integration** === 101 **=> Global Reach**: Utilize the expansive AWS CloudFront network for low-latency streaming across the globe. 102 **=> 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. 103 **=> 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. 87 104 88 Subscription Management: 89 => Seamlessly integrate aMember and Wordpress roles for membership subscription management.90 => Restrict video access to active subscribers only.105 === **AWS Kinesis Video Streams Integration** === 106 **=> Flexible Streaming**: Leverage AWS Kinesis Video Streams for both live and on-demand video streaming. 107 **=> Direct Downloads**: Enable users to download clips directly from the player, enhancing the viewer experience. 91 108 92 Analytics Integration: 93 => Google Tag Manager and Google Analytics support.94 => Track comprehensive video statistics, including playback duration and timing.109 === **Subscription Management** === 110 **=> Integrated Solution**: Combine aMember and WordPress roles for efficient subscription management. 111 **=> Exclusive Content**: Offer videos exclusively to active subscribers, adding value to your membership packages. 95 112 96 Streaming Optimization: 97 => Convert .mp4 videos into .m3u8 streaming format effortlessly on Windows or macOS. 98 => Converting and AWS S3 Upload script for Windows and macOS is also included. 99 => Detailed step-by-step configuration and converting guides included. 113 === **Analytics Integration** === 114 **=> In-depth Tracking**: Support for Google Tag Manager and Google Analytics allows you to monitor detailed video statistics. 115 **=> Viewer Insights**: Gain insights into playback duration and user engagement, helping you to optimize your content strategy. 116 117 === **Streaming Optimization** === 118 **=> Effortless Conversion**: Transform .mp4 files into the .m3u8 format with ease, using our tools for Windows or macOS. 119 **=> 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. 100 120 101 121 [Check out HLS Player PRO >](https://hls-player-pro.root-sector.com/) … … 109 129 110 130 == Changelog == 131 = 1.0.8 = 132 * Added: videojs_custom_options_json shortcode 133 * Removed: jquery is no longer required 134 111 135 = 1.0.7 = 112 136 * Fixed: Include required jquery component for the player -
hls-player/tags/1.0.8/hls-player.php
r3106153 r3109826 4 4 * Plugin URI: https://github.com/root-sector/wordpress-plugin-hls-player-free 5 5 * Description: HLS Player is a simple, lightweight HTTP Live Streaming player for WordPress. Leveraging video.js, the leading open-source HTML5 player, it enables effortless embedding of both responsive and fixed-width .m3u8 or .mpd HLS videos into posts and pages. 6 * Version: 1.0. 76 * Version: 1.0.8 7 7 * Requires at least: 6.4 8 8 * Requires PHP: 8.1 … … 17 17 } 18 18 19 define('HLS_PLAYER_VERSION', '1.0. 7');19 define('HLS_PLAYER_VERSION', '1.0.8'); 20 20 21 21 class HLSPlayer … … 29 29 // Enqueue scripts and styles 30 30 add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts_and_styles')); 31 32 // AJAX actions33 add_action('wp_ajax_sign_cookie_policy', array($this, 'process_video_signing_request'));34 add_action('wp_ajax_nopriv_sign_cookie_policy', array($this, 'process_video_signing_request'));35 31 36 32 // Shortcodes and filters … … 47 43 wp_enqueue_script('videojs', plugins_url('public/js/video.min.js', __FILE__), array(), $this->plugin_version, false); 48 44 wp_enqueue_style('videojs', plugins_url('public/css/video-js.min.css', __FILE__), array(), $this->plugin_version); 49 wp_enqueue_script('jquery');50 45 } 51 46 } … … 53 48 public function hls_player_shortcode($atts) 54 49 { 55 // Parse the attributes and set the default value for url 56 $atts = shortcode_atts( 57 array( 58 'url' => '', 59 'class' => '', 60 'width' => '', 61 'height' => '', 62 'controls' => '', 63 'preload' => 'auto', 64 'autoplay' => 'false', 65 'loop' => '', 66 'muted' => '', 67 'poster' => '', 68 'captions' => '', 69 ), 70 $atts, 71 'videojs_hls' 50 // Prevent parsing of the shortcode if admin 51 if (is_admin()) { 52 return; 53 } 54 // Define shortcode attributes with defaults 55 $default_atts = array( 56 'url' => '', 57 'class' => '', 58 'width' => '', 59 'height' => '', 60 'controls' => '', 61 'preload' => 'auto', 62 'autoplay' => 'false', 63 'loop' => '', 64 'muted' => '', 65 'poster' => '', 66 'captions' => '', 67 'videojs_custom_options_json' => '{}', 72 68 ); 69 70 // Parse shortcode attributes 71 $atts = shortcode_atts($default_atts, $atts, 'videojs_hls'); 73 72 74 73 // Generate a unique id for the video element 75 74 $video_id = uniqid('video_'); 76 75 77 // Define custom css classes for videojs player76 // Generate video tag attributes 78 77 $class = !empty($atts['class']) ? $atts['class'] : 'video-js vjs-fluid'; 78 $controls = $atts['controls'] == 'false' ? '' : ' controls'; 79 $preload = $atts['preload'] == 'metadata' ? ' preload="metadata"' : ($atts['preload'] == 'none' ? ' preload="none"' : ' preload="auto"'); 80 $autoplay = $atts['autoplay'] == 'true' ? ' autoplay' : ''; 81 $loop = $atts['loop'] == 'true' ? ' loop' : ''; 82 $muted = $atts['muted'] == 'true' ? ' muted' : ''; 83 $poster = !empty($atts['poster']) ? ' poster="' . $atts['poster'] . '"' : ''; 79 84 80 // Controls 81 $controls = $atts['controls'] == 'false' ? '' : ' controls'; 82 83 // Preload 84 $preload = $atts['preload'] == 'metadata' ? ' preload="metadata"' : ($atts['preload'] == 'none' ? ' preload="none"' : ' preload="auto"'); 85 86 // Autoplay 87 $autoplay = $atts['autoplay'] == 'true' ? ' autoplay' : ''; 88 89 // Loop 90 $loop = $atts['loop'] == 'true' ? ' loop' : ''; 91 92 // Muted 93 $muted = $atts['muted'] == 'true' ? ' muted' : ''; 94 95 // Poster 96 $poster = !empty($atts['poster']) ? ' poster="' . $atts['poster'] . '"' : ''; 85 $type = ''; // Initialize with empty type 97 86 98 87 // Extract the url attribute 99 88 $url = $atts['url']; 100 101 // Check the file extension of the url 102 $fileparts = pathinfo($url); 103 $extension = $fileparts['extension']; 104 105 // Set the type attribute according to the file extension 106 switch ($extension) { 107 case 'm3u8': 108 $type = 'application/x-mpegURL'; 109 break; 110 case 'mpd': 111 $type = 'application/dash+xml'; 112 break; 113 case 'mp4': 114 $type = 'video/mp4'; 115 break; 116 default: 117 $type = ''; 89 if (!empty($url)) { 90 $fileparts = pathinfo($url); 91 $extension = $fileparts['extension']; 92 switch ($extension) { 93 case 'm3u8': 94 $type = 'application/x-mpegURL'; 95 break; 96 case 'mpd': 97 $type = 'application/dash+xml'; 98 break; 99 case 'mp4': 100 $type = 'video/mp4'; 101 break; 102 default: 103 $type = ''; 104 } 118 105 } 119 106 … … 149 136 'type' => $type, 150 137 'captions_data' => $captions_data, 138 'videojs_custom_options_json' => $atts['videojs_custom_options_json'], 151 139 ); 152 140 -
hls-player/tags/1.0.8/public/js/hls-player.js
r3103168 r3109826 1 (function ( $) {1 (function () { 2 2 "use strict"; 3 3 4 4 const onReady = (callback) => { 5 if (document.readyState != "loading") callback();5 if (document.readyState !== "loading") callback(); 6 6 else document.addEventListener("DOMContentLoaded", callback); 7 7 }; 8 8 9 9 onReady(() => { 10 $("video.video-js").each(function () { 11 var videoId = $(this).attr("id"); 12 var localizedName = "hlsPlayerData_" + videoId; 10 const videos = document.querySelectorAll("video.video-js"); 11 12 videos.forEach((video) => { 13 const videoId = video.getAttribute("id"); 14 const localizedName = "hlsPlayerData_" + videoId; 13 15 14 16 if (typeof window[localizedName] !== "undefined") { 15 17 // Decode base64-encoded data 16 let playerData = JSON.parse(atob(window[localizedName]));18 const playerData = JSON.parse(atob(window[localizedName])); 17 19 18 let player = videojs(playerData.video_id); 20 // Parse the player custom options JSON and merge with default options 21 const customOptions = JSON.parse( 22 playerData.videojs_custom_options_json 23 ); 24 const options = { ...customOptions }; 25 26 // Initialize the player with options 27 const player = videojs(playerData.video_id, options); 28 19 29 player.src({ 20 30 src: playerData.src, … … 41 51 }); 42 52 }); 43 })( jQuery);53 })(); -
hls-player/tags/1.0.8/public/js/hls-player.min.js
r3103168 r3109826 1 !function( $){"use strict";var callback;callback=()=>{$("video.video-js").each((function(){var localizedName="hlsPlayerData_"+$(this).attr("id");if(void 0!==window[localizedName]){let playerData=JSON.parse(atob(window[localizedName])),player=videojs(playerData.video_id);player.src({src:playerData.src,type:playerData.type}),playerData.captions_data.forEach((caption=>{player.addRemoteTextTrack({kind:"subtitles",src:caption.src,srclang:caption.srclang,label:caption.label,default:caption.default},!1)})),player.load()}else console.log("No localized data found for "+localizedName)}))},"loading"!=document.readyState?callback():document.addEventListener("DOMContentLoaded",callback)}(jQuery);1 !function(){"use strict";var callback;callback=()=>{document.querySelectorAll("video.video-js").forEach((video=>{const localizedName="hlsPlayerData_"+video.getAttribute("id");if(void 0!==window[localizedName]){const playerData=JSON.parse(atob(window[localizedName])),options={...JSON.parse(playerData.videojs_custom_options_json)},player=videojs(playerData.video_id,options);player.src({src:playerData.src,type:playerData.type}),playerData.captions_data.forEach((caption=>{player.addRemoteTextTrack({kind:"subtitles",src:caption.src,srclang:caption.srclang,label:caption.label,default:caption.default},!1)})),player.load()}else console.log("No localized data found for "+localizedName)}))},"loading"!==document.readyState?callback():document.addEventListener("DOMContentLoaded",callback)}(); -
hls-player/trunk/Readme.txt
r3106153 r3109826 4 4 Donate link: https://donate.stripe.com/5kA7w2bRl3KN7qU3cd 5 5 Requires at least: 6.4 6 Tested up to: 6.5. 46 Tested up to: 6.5.5 7 7 Requires PHP: 8.1 8 Stable tag: 1.0. 78 Stable tag: 1.0.8 9 9 License: GPLv3 10 10 License URI: https://www.gnu.org/licenses/gpl-3.0 … … 33 33 Elevate your WordPress site with the HLS Player Video Plugin – the pinnacle of professional-grade video streaming. 34 34 35 = HLS Player Plugin Usage=35 == HLS Player Plugin Usage == 36 36 37 37 To embed a video, create a new post/page and use the following shortcode: 38 38 39 `[hls_player url="https://example.com/ external/xxxxxxxxx.m3u8"]`39 `[hls_player url="https://example.com/path/to/video_playlist.m3u8"]` 40 40 41 41 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). … … 43 43 = Video Shortcode Options = 44 44 45 The shortcode supports the following options: 45 ### General Options 46 46 47 * **class**: Define the Video.js player's CSS class (Default: video-js). Additional classes listed at https://videojs.com/guides/layout/#classes 48 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" class="video-js vjs-fluid vjs-16-9"]` 47 **class**: Define the Video.js player's CSS class (Default: video-js). Additional classes listed at https://videojs.com/guides/layout/#classes 49 48 50 * **width**: Defines the width of the video player. 51 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" width="480"]` 49 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" class="video-js vjs-fluid vjs-16-9"]` 52 50 53 * **height**: Defines the height of the video player. 54 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" height="264"]` 51 **width**: Defines the width of the video file. 55 52 56 * **controls**: Specify whether video controls should be displayed (Default: "true"). Use "false" to hide controls. 57 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" controls="false"]` 58 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. 53 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" width="480"]` 59 54 60 * **preload**: Specify how the video should be loaded when the page loads (Default: "auto"). Options include "metadata," "none," and "auto." 61 - "metadata" - Load only the metadata of the video, which includes information like the duration and dimensions of the video. Sometimes, the metadata will be loaded by downloading a few frames of video. 62 - "none" - Don't preload any data. The browser will wait until the user hits "play" to begin downloading. 63 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" preload="metadata"]` 55 **height**: Defines the height of the video file. 64 56 65 * **autoplay**: Cause the video to play automatically when the page loads. 66 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" autoplay="true"]` 57 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" height="264"]` 67 58 68 * **loop**: Set the video to automatically loop back to the beginning and continue playing after it finishes. 69 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" loop="true"]` 59 **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. 70 60 71 * **poster**: Define an image as a placeholder before the video plays. 72 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" poster="http://example.com/wp-content/uploads/poster.jpg"]` 61 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" controls="false"]` 73 62 74 * **muted**: Specify that the audio output of the video should be muted. 75 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" muted="true"]` 63 **preload**: Specify how the video should be loaded when the page loads (Default: "auto"). Options include "metadata," "none," and "auto." 64 "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. 65 "none" - Don't preload any data. The browser will wait until the user hits "play" to begin downloading. 76 66 77 * **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"`. 67 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" preload="metadata"]` 68 69 **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 70 71 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" autoplay="true"]` 72 73 **loop**: Make the video loop to the beginning when finished and automatically continue playing. 74 75 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" loop="true"]` 76 77 **poster**: Define an image as a placeholder before the video plays. 78 79 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" poster="http://example.com/wp-content/uploads/poster.jpg"]` 80 81 **muted**: Specify that the audio output of the video should be muted. 82 83 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" muted="true"]` 84 85 **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"`. 78 86 provide the lang in two character language code format. For example de-de, en-us 79 `[hls_player url="https://example.com/external/xxxxxxxxx.m3u8" captions="path/to/captions-en.vtt|en-EN|English,path/to/captions-es.vtt|en-us|English|default"]` 87 88 `[hls_player url="https://example.com/path/to/video_playlist.m3u8" captions="path/to/captions-en.vtt|en-EN|English,path/to/captions-es.vtt|en-us|English|default"]` 89 90 **videojs_custom_options_json**: JSON format string for custom options (https://videojs.com/guides/options/) for the video.js player. 91 92 ` 93 [hls_player url="https://example.com/path/to/video_playlist.m3u8" videojs_custom_options_json='{"autoplay": "muted"}'] 94 or 95 [hls_player url="https://example.com/path/to/video_playlist.m3u8" videojs_custom_options_json='{"autoplay": true,"liveui": true,"liveTracker": {"trackingThreshold": 8}}'] 96 ` 80 97 81 98 == Get more advanced features with HLS Player PRO == 82 99 83 AWS CloudFront Integration: 84 => Global low-latency content delivery network support.85 => Secure videos with CloudFront Signed Cookies against unauthorized downloads.86 => Easy setup with step-by-step instructions for configuring CloudFront and signed cookies.100 === **AWS CloudFront Integration** === 101 **=> Global Reach**: Utilize the expansive AWS CloudFront network for low-latency streaming across the globe. 102 **=> 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. 103 **=> 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. 87 104 88 Subscription Management: 89 => Seamlessly integrate aMember and Wordpress roles for membership subscription management.90 => Restrict video access to active subscribers only.105 === **AWS Kinesis Video Streams Integration** === 106 **=> Flexible Streaming**: Leverage AWS Kinesis Video Streams for both live and on-demand video streaming. 107 **=> Direct Downloads**: Enable users to download clips directly from the player, enhancing the viewer experience. 91 108 92 Analytics Integration: 93 => Google Tag Manager and Google Analytics support.94 => Track comprehensive video statistics, including playback duration and timing.109 === **Subscription Management** === 110 **=> Integrated Solution**: Combine aMember and WordPress roles for efficient subscription management. 111 **=> Exclusive Content**: Offer videos exclusively to active subscribers, adding value to your membership packages. 95 112 96 Streaming Optimization: 97 => Convert .mp4 videos into .m3u8 streaming format effortlessly on Windows or macOS. 98 => Converting and AWS S3 Upload script for Windows and macOS is also included. 99 => Detailed step-by-step configuration and converting guides included. 113 === **Analytics Integration** === 114 **=> In-depth Tracking**: Support for Google Tag Manager and Google Analytics allows you to monitor detailed video statistics. 115 **=> Viewer Insights**: Gain insights into playback duration and user engagement, helping you to optimize your content strategy. 116 117 === **Streaming Optimization** === 118 **=> Effortless Conversion**: Transform .mp4 files into the .m3u8 format with ease, using our tools for Windows or macOS. 119 **=> 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. 100 120 101 121 [Check out HLS Player PRO >](https://hls-player-pro.root-sector.com/) … … 109 129 110 130 == Changelog == 131 = 1.0.8 = 132 * Added: videojs_custom_options_json shortcode 133 * Removed: jquery is no longer required 134 111 135 = 1.0.7 = 112 136 * Fixed: Include required jquery component for the player -
hls-player/trunk/hls-player.php
r3106153 r3109826 4 4 * Plugin URI: https://github.com/root-sector/wordpress-plugin-hls-player-free 5 5 * Description: HLS Player is a simple, lightweight HTTP Live Streaming player for WordPress. Leveraging video.js, the leading open-source HTML5 player, it enables effortless embedding of both responsive and fixed-width .m3u8 or .mpd HLS videos into posts and pages. 6 * Version: 1.0. 76 * Version: 1.0.8 7 7 * Requires at least: 6.4 8 8 * Requires PHP: 8.1 … … 17 17 } 18 18 19 define('HLS_PLAYER_VERSION', '1.0. 7');19 define('HLS_PLAYER_VERSION', '1.0.8'); 20 20 21 21 class HLSPlayer … … 29 29 // Enqueue scripts and styles 30 30 add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts_and_styles')); 31 32 // AJAX actions33 add_action('wp_ajax_sign_cookie_policy', array($this, 'process_video_signing_request'));34 add_action('wp_ajax_nopriv_sign_cookie_policy', array($this, 'process_video_signing_request'));35 31 36 32 // Shortcodes and filters … … 47 43 wp_enqueue_script('videojs', plugins_url('public/js/video.min.js', __FILE__), array(), $this->plugin_version, false); 48 44 wp_enqueue_style('videojs', plugins_url('public/css/video-js.min.css', __FILE__), array(), $this->plugin_version); 49 wp_enqueue_script('jquery');50 45 } 51 46 } … … 53 48 public function hls_player_shortcode($atts) 54 49 { 55 // Parse the attributes and set the default value for url 56 $atts = shortcode_atts( 57 array( 58 'url' => '', 59 'class' => '', 60 'width' => '', 61 'height' => '', 62 'controls' => '', 63 'preload' => 'auto', 64 'autoplay' => 'false', 65 'loop' => '', 66 'muted' => '', 67 'poster' => '', 68 'captions' => '', 69 ), 70 $atts, 71 'videojs_hls' 50 // Prevent parsing of the shortcode if admin 51 if (is_admin()) { 52 return; 53 } 54 // Define shortcode attributes with defaults 55 $default_atts = array( 56 'url' => '', 57 'class' => '', 58 'width' => '', 59 'height' => '', 60 'controls' => '', 61 'preload' => 'auto', 62 'autoplay' => 'false', 63 'loop' => '', 64 'muted' => '', 65 'poster' => '', 66 'captions' => '', 67 'videojs_custom_options_json' => '{}', 72 68 ); 69 70 // Parse shortcode attributes 71 $atts = shortcode_atts($default_atts, $atts, 'videojs_hls'); 73 72 74 73 // Generate a unique id for the video element 75 74 $video_id = uniqid('video_'); 76 75 77 // Define custom css classes for videojs player76 // Generate video tag attributes 78 77 $class = !empty($atts['class']) ? $atts['class'] : 'video-js vjs-fluid'; 78 $controls = $atts['controls'] == 'false' ? '' : ' controls'; 79 $preload = $atts['preload'] == 'metadata' ? ' preload="metadata"' : ($atts['preload'] == 'none' ? ' preload="none"' : ' preload="auto"'); 80 $autoplay = $atts['autoplay'] == 'true' ? ' autoplay' : ''; 81 $loop = $atts['loop'] == 'true' ? ' loop' : ''; 82 $muted = $atts['muted'] == 'true' ? ' muted' : ''; 83 $poster = !empty($atts['poster']) ? ' poster="' . $atts['poster'] . '"' : ''; 79 84 80 // Controls 81 $controls = $atts['controls'] == 'false' ? '' : ' controls'; 82 83 // Preload 84 $preload = $atts['preload'] == 'metadata' ? ' preload="metadata"' : ($atts['preload'] == 'none' ? ' preload="none"' : ' preload="auto"'); 85 86 // Autoplay 87 $autoplay = $atts['autoplay'] == 'true' ? ' autoplay' : ''; 88 89 // Loop 90 $loop = $atts['loop'] == 'true' ? ' loop' : ''; 91 92 // Muted 93 $muted = $atts['muted'] == 'true' ? ' muted' : ''; 94 95 // Poster 96 $poster = !empty($atts['poster']) ? ' poster="' . $atts['poster'] . '"' : ''; 85 $type = ''; // Initialize with empty type 97 86 98 87 // Extract the url attribute 99 88 $url = $atts['url']; 100 101 // Check the file extension of the url 102 $fileparts = pathinfo($url); 103 $extension = $fileparts['extension']; 104 105 // Set the type attribute according to the file extension 106 switch ($extension) { 107 case 'm3u8': 108 $type = 'application/x-mpegURL'; 109 break; 110 case 'mpd': 111 $type = 'application/dash+xml'; 112 break; 113 case 'mp4': 114 $type = 'video/mp4'; 115 break; 116 default: 117 $type = ''; 89 if (!empty($url)) { 90 $fileparts = pathinfo($url); 91 $extension = $fileparts['extension']; 92 switch ($extension) { 93 case 'm3u8': 94 $type = 'application/x-mpegURL'; 95 break; 96 case 'mpd': 97 $type = 'application/dash+xml'; 98 break; 99 case 'mp4': 100 $type = 'video/mp4'; 101 break; 102 default: 103 $type = ''; 104 } 118 105 } 119 106 … … 149 136 'type' => $type, 150 137 'captions_data' => $captions_data, 138 'videojs_custom_options_json' => $atts['videojs_custom_options_json'], 151 139 ); 152 140 -
hls-player/trunk/public/js/hls-player.js
r3103168 r3109826 1 (function ( $) {1 (function () { 2 2 "use strict"; 3 3 4 4 const onReady = (callback) => { 5 if (document.readyState != "loading") callback();5 if (document.readyState !== "loading") callback(); 6 6 else document.addEventListener("DOMContentLoaded", callback); 7 7 }; 8 8 9 9 onReady(() => { 10 $("video.video-js").each(function () { 11 var videoId = $(this).attr("id"); 12 var localizedName = "hlsPlayerData_" + videoId; 10 const videos = document.querySelectorAll("video.video-js"); 11 12 videos.forEach((video) => { 13 const videoId = video.getAttribute("id"); 14 const localizedName = "hlsPlayerData_" + videoId; 13 15 14 16 if (typeof window[localizedName] !== "undefined") { 15 17 // Decode base64-encoded data 16 let playerData = JSON.parse(atob(window[localizedName]));18 const playerData = JSON.parse(atob(window[localizedName])); 17 19 18 let player = videojs(playerData.video_id); 20 // Parse the player custom options JSON and merge with default options 21 const customOptions = JSON.parse( 22 playerData.videojs_custom_options_json 23 ); 24 const options = { ...customOptions }; 25 26 // Initialize the player with options 27 const player = videojs(playerData.video_id, options); 28 19 29 player.src({ 20 30 src: playerData.src, … … 41 51 }); 42 52 }); 43 })( jQuery);53 })(); -
hls-player/trunk/public/js/hls-player.min.js
r3103168 r3109826 1 !function( $){"use strict";var callback;callback=()=>{$("video.video-js").each((function(){var localizedName="hlsPlayerData_"+$(this).attr("id");if(void 0!==window[localizedName]){let playerData=JSON.parse(atob(window[localizedName])),player=videojs(playerData.video_id);player.src({src:playerData.src,type:playerData.type}),playerData.captions_data.forEach((caption=>{player.addRemoteTextTrack({kind:"subtitles",src:caption.src,srclang:caption.srclang,label:caption.label,default:caption.default},!1)})),player.load()}else console.log("No localized data found for "+localizedName)}))},"loading"!=document.readyState?callback():document.addEventListener("DOMContentLoaded",callback)}(jQuery);1 !function(){"use strict";var callback;callback=()=>{document.querySelectorAll("video.video-js").forEach((video=>{const localizedName="hlsPlayerData_"+video.getAttribute("id");if(void 0!==window[localizedName]){const playerData=JSON.parse(atob(window[localizedName])),options={...JSON.parse(playerData.videojs_custom_options_json)},player=videojs(playerData.video_id,options);player.src({src:playerData.src,type:playerData.type}),playerData.captions_data.forEach((caption=>{player.addRemoteTextTrack({kind:"subtitles",src:caption.src,srclang:caption.srclang,label:caption.label,default:caption.default},!1)})),player.load()}else console.log("No localized data found for "+localizedName)}))},"loading"!==document.readyState?callback():document.addEventListener("DOMContentLoaded",callback)}();
Note: See TracChangeset
for help on using the changeset viewer.