{"id":1587,"date":"2021-05-07T09:42:52","date_gmt":"2021-05-07T02:42:52","guid":{"rendered":"https:\/\/anhduc.org\/?p=1587"},"modified":"2025-11-01T19:57:40","modified_gmt":"2025-11-01T12:57:40","slug":"huong-dan-su-dung-plyr-phat-audio-video","status":"publish","type":"post","link":"https:\/\/anhduc.org\/?p=1587","title":{"rendered":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Plyr ph\u00e1t Audio, Video"},"content":{"rendered":"\r\n<p>Trong qu\u00e1 tr\u00ecnh l\u00e0m website nghe Radio Online, m\u00ecnh g\u1eb7p kh\u00f3 kh\u0103n khi kh\u00f4ng t\u00ecm \u0111\u01b0\u1ee3c player h\u1ed7 tr\u1ee3 \u0111\u1ecbnh d\u1ea1ng HLS (M3U8), c\u00e1c player mi\u1ec5n ph\u00ed tr\u00ean m\u1ea1ng nh\u01b0<strong> jPlayer, Muses<\/strong> ch\u1ec9 h\u1ed7 tr\u1ee3 MP3, AAC, OGG. M\u00ecnh c\u00f3 th\u1eed s\u1eed d\u1ee5ng player c\u1ee7a <strong>Wowza<\/strong> nh\u01b0ng t\u1eeb 31\/8\/2021 n\u00f3 ch\u1ea5m d\u1ee9t h\u1ed7 tr\u1ee3. R\u1ea5t may l\u00e0 t\u00ecm \u0111\u01b0\u1ee3c <strong>Plyr<\/strong>, n\u00f3 h\u1ed7 tr\u1ee3 play t\u1ed1t c\u00e1c link M3U8, tr\u00ean m\u1ea1ng th\u1ea5y \u00edt b\u00e0i vi\u1ebft v\u1ec1 player Plyr, n\u00ean ti\u1ec7n l\u00e0m m\u00ecnh d\u1ecbch nh\u1eefng ch\u1ed7 c\u1ea7n thi\u1ebft t\u1eeb <a href=\"https:\/\/github.com\/sampotts\/plyr\" target=\"_blank\" rel=\"noopener\">Document<\/a> c\u1ee7a Plyr cho ai c\u1ea7n tham kh\u1ea3o. Ok b\u1eaft \u0111\u1ea7u nh\u00e9.<\/p>\r\n<h2>S\u01a1 qua v\u1ec1 Plyr<\/h2>\r\n<p><strong>Plyr<\/strong> l\u00e0 m\u1ed9t tr\u00ecnh ph\u00e1t \u0111a ph\u01b0\u01a1ng ti\u1ec7n HTML5, h\u1ed7 tr\u1ee3 c\u1ea3 audio v\u00e0 video. Plyr c\u00f3 c\u1ea5u tr\u00fac code \u0111\u01a1n gi\u1ea3n, nh\u1eb9, c\u00f3 kh\u1ea3 n\u0103ng t\u00f9y bi\u1ebfn cao, h\u1ed7 tr\u1ee3 h\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n t\u1ea1i nh\u01b0 Chrome, Firefox, Safari, Edge.<\/p>\r\n<h2>T\u00ednh n\u0103ng<\/h2>\r\n<ul>\r\n<li>\ud83d\udcfc <strong>HTML Video &amp; Audio, YouTube &amp; Vimeo<\/strong> &#8211; H\u1ed7 tr\u1ee3 nhi\u1ec1u ngu\u1ed3n \u0111\u1ea7u v\u00e0o.<\/li>\r\n<li>\ud83d\udcd6 <strong>Accessible<\/strong> &#8211; H\u1ed7 tr\u1ee3 hi\u1ec3n th\u1ecb \u0111a ph\u1ee5 \u0111\u1ec1.<\/li>\r\n<li>\ud83d\udd27 <strong>Customizable<\/strong> &#8211; C\u00f3 kh\u1ea3 n\u0103ng t\u00f9y bi\u1ebfn giao di\u1ec7n player theo \u00fd th\u00edch.<\/li>\r\n<li>\ud83d\ude0e<strong> Clean HTML<\/strong> &#8211; Code d\u1ec5 hi\u1ec3u.<\/li>\r\n<li>\ud83d\udcf1\u00a0<strong>Responsive<\/strong> &#8211; K\u00edch th\u01b0\u1edbc th\u00edch \u1ee9ng v\u1edbi m\u00e0n h\u00ecnh.<\/li>\r\n<li>\ud83d\udcb5\u00a0<strong>Monetization<\/strong> &#8211; H\u1ed7 tr\u1ee3 ki\u1ebfm ti\u1ec1n t\u1eeb video.<\/li>\r\n<li>\ud83d\udcf9\u00a0<strong>Streaming<\/strong> &#8211; H\u1ed7 tr\u1ee3 streaming qua giao th\u1ee9c hls.js, Shaka v\u00e0 dash.js (C\u00e1i n\u00e0y \u00edt c\u00f3 player free n\u00e0o h\u1ed7 tr\u1ee3).<\/li>\r\n<li>\ud83c\udf9b\u00a0<strong>API<\/strong> &#8211; H\u1ed7 tr\u1ee3 \u0111i\u1ec1u khi\u1ec3n qua API m\u1ed9t s\u1ed1 ch\u1ee9c n\u0103ng nh\u01b0 tua, \u0111i\u1ec1u ch\u1ec9nh \u00e2m l\u01b0\u1ee3ng, t\u00ecm ki\u1ebfm.<\/li>\r\n<li>\ud83d\udd0e\u00a0<strong>Fullscreen<\/strong> &#8211; H\u1ed7 tr\u1ee3 hi\u1ec3n th\u1ecb full m\u00e0n h\u00ecnh<\/li>\r\n<li>\u2328\ufe0f<strong>\u00a0Shortcuts<\/strong> &#8211; H\u1ed7 tr\u1ee3 ph\u00edm t\u1eaft<\/li>\r\n<li>\ud83d\udda5\u00a0<strong>Picture-in-Picture<\/strong> &#8211; H\u1ed7 tr\u1ee3 t\u00ednh n\u0103ng Picture-in-Picture (Video thu nh\u1ecf xu\u1ed1ng g\u00f3c khi chuy\u1ec3n qua \u1ee9ng d\u1ee5ng kh\u00e1c)<\/li>\r\n<li>\ud83c\udfce\u00a0<strong>Speed controls<\/strong> &#8211; H\u1ed7 tr\u1ee3 thay \u0111\u1ed5i t\u1ed1c \u0111\u1ed9 ph\u00e1t<\/li>\r\n<li>\ud83d\udc4c\u00a0<strong>Preview thumbnails<\/strong> &#8211; H\u1ed7 tr\u1ee3 hi\u1ec3n th\u1ecb \u1ea3nh \u0111\u1ea1i di\u1ec7n<\/li>\r\n<li>\ud83e\udd1f\u00a0<strong>No frameworks<\/strong> &#8211; \u0111\u01b0\u1ee3c vi\u1ebft b\u1eb1ng &#8220;vanilla&#8221; ES6 JavaScript, kh\u00f4ng y\u00eau c\u1ea7u jQuery.<\/li>\r\n<\/ul>\r\n<p><!--more--><\/p>\r\n<h2>H\u01b0\u1edbng d\u1eabn thi\u1ebft l\u1eadp<\/h2>\r\n<h3>JavaScript<\/h3>\r\n<p>Khai b\u00e1o th\u01b0 vi\u1ec7n <strong>plyr.js<\/strong> tr\u01b0\u1edbc th\u1ebb <strong>&lt;\/body&gt;<\/strong> v\u00e0 kh\u1edfi t\u1ea1o<strong> Player Plyr<\/strong> m\u1edbi nh\u01b0 b\u00ean d\u01b0\u1edbi.<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;script src=\"path\/to\/plyr.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\nconst player = new Plyr('#player');\r\n&lt;\/script&gt;<\/pre>\r\n<p>N\u1ebfu kh\u00f4ng mu\u1ed1n l\u01b0u ch\u1eef <strong>plyr.js<\/strong> tr\u00ean server, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng CDN do Plyr cung c\u1ea5p\u00a0<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;script src=\"https:\/\/cdn.plyr.io\/3.6.7\/plyr.js\"&gt;&lt;\/script&gt;<\/pre>\r\n<p>Ho\u1eb7c:<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;script\u00a0src=\"https:\/\/cdn.plyr.io\/3.6.7\/plyr.polyfilled.js\"&gt;&lt;\/script&gt;<\/pre>\r\n<h3>CSS<\/h3>\r\n<p>Th\u00eam t\u1ec7p <strong>plyr.css<\/strong> v\u00e0o th\u1ebb <strong>&lt;\/head&gt;<\/strong><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link\u00a0rel=\"stylesheet\"\u00a0href=\"path\/to\/plyr.css\"\u00a0\/&gt;<\/pre>\r\n<pre>B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 d\u00f9ng CDN c\u1ee7a Plyr<br \/><br \/><\/pre>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link\u00a0rel=\"stylesheet\"\u00a0href=\"https:\/\/cdn.plyr.io\/3.6.7\/plyr.css\"\u00a0\/&gt;<\/pre>\r\n<h3>HTML5 Video<\/h3>\r\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1598\" src=\"https:\/\/anhduc.org\/wp-content\/uploads\/2021\/05\/Plyr-video-player-html5.jpg\" alt=\"\" width=\"580\" height=\"333\" \/><\/p>\r\n<p>Xem <a href=\"https:\/\/codepen.io\/pen?template=bKeqpr\" target=\"_blank\" rel=\"noopener\">Demo<\/a><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;video id=\"player\" playsinline controls data-poster=\"\/path\/to\/poster.jpg\"&gt;\r\n&lt;source src=\"\/path\/to\/video.mp4\" type=\"video\/mp4\" \/&gt;\r\n&lt;source src=\"\/path\/to\/video.webm\" type=\"video\/webm\" \/&gt;\r\n\r\n&lt;!-- C\u00f3 t\u00f9y ch\u1ecdn th\u00eam ph\u1ee5 \u0111\u1ec1 --&gt;\r\n&lt;track kind=\"captions\" label=\"English captions\" src=\"\/path\/to\/captions.vtt\" srclang=\"en\" default \/&gt;\r\n&lt;\/video&gt;<\/pre>\r\n<p>Ch\u00fa \u00fd: \u1ea2nh \u0111\u1ea1i di\u1ec7n s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh\u00a0data-poster thay v\u00ec poster \u0111\u1ec3 tr\u00e1nh tr\u01b0\u1eddng h\u1ee3p t\u1ea3i file \u1ea3nh hai l\u1ea7n. N\u1ebfu b\u1ea1n ch\u1eafc ch\u1eafn \u1ea3nh s\u1ebd \u0111\u01b0\u1ee3c l\u01b0u trong cache, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh poster nh\u01b0 b\u00ecnh th\u01b0\u1eddng.<\/p>\r\n<h3>HTML5 Audio<\/h3>\r\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1599\" src=\"https:\/\/anhduc.org\/wp-content\/uploads\/2021\/05\/Plyr-audio-player-html5.jpg\" alt=\"Plyr-audio-player-html5\" width=\"571\" height=\"66\" \/><\/p>\r\n<p>Xem <a href=\"https:\/\/codepen.io\/pen?template=bKeqpr\" target=\"_blank\" rel=\"noopener\">Demo<\/a><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;audio id=\"player\" controls&gt;\r\n&lt;source src=\"\/path\/to\/audio.mp3\" type=\"audio\/mp3\" \/&gt;\r\n&lt;source src=\"\/path\/to\/audio.ogg\" type=\"audio\/ogg\" \/&gt;\r\n&lt;\/audio&gt;<\/pre>\r\n<h3>Youtube<\/h3>\r\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1600\" src=\"https:\/\/anhduc.org\/wp-content\/uploads\/2021\/05\/Plyr-youtube-player-html5.jpg\" alt=\"Plyr-youtube-player-html5\" width=\"580\" height=\"333\" \/><\/p>\r\n<p>Xem <a href=\"https:\/\/codepen.io\/pen?template=GGqbbJ\" target=\"_blank\" rel=\"noopener\">Demo<\/a><\/p>\r\n<p>\u0110\u1ed1i v\u1edbi Youtube\u00a0 khi nh\u00fang video b\u1eb1ng th\u1ebb <strong>&lt;iframe&gt;<\/strong> k\u00edch th\u01b0\u1edbc video th\u01b0\u1eddng b\u1ecb fix c\u1ed1 \u0111\u1ecbnh, Plyr s\u1eed d\u1ee5ng class <strong>plyr__video-embed<\/strong> bao ngo\u00e0i th\u1ebb <strong>&lt;iframe&gt;<\/strong> \u0111\u1ec3 video c\u00f3 kh\u1ea3 n\u0103ng reponsive. Ngo\u00e0i ra th\u1ebb n\u00e0y c\u00f2n gi\u00fap Plyr th\u00eam c\u00e1c thu\u1ed9c t\u00ednh \u0111i\u1ec1u khi\u1ec3n v\u00e0o video nh\u01b0 <strong>autoplay, loop, hl<\/strong> (youtube) v\u00e0 <strong>playsinline<\/strong> (youtube). C\u00e1c b\u1ea1n n\u00ean thay gi\u00e1 tr\u1ecb <strong>origin<\/strong> trong link b\u1eb1ng t\u00ean mi\u1ec1n c\u1ee7a b\u1ea1n.<\/p>\r\n<p>C\u00f3 2 c\u00e1ch \u0111\u1ec3 nh\u00fang Youtube v\u00e0o Plyr, c\u00e1ch th\u1ee9 nh\u1ea5t s\u1eed d\u1ee5ng th\u1ebb ho\u1eb7c nh\u00fang th\u1eb3ng link v\u00e0o th\u1ebb <strong>&lt;div&gt;<\/strong> b\u1eb1ng c\u00e1ch khai b\u00e1o hai thu\u1ed9c t\u00ednh <strong>data-plyr-provider<\/strong> v\u00e0 <strong>data-plyr-embed-id<\/strong><\/p>\r\n<p><strong>C\u00e1ch 1:<\/strong><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"plyr__video-embed\" id=\"player\"&gt;\r\n&lt;iframe\r\nsrc=\"https:\/\/www.youtube.com\/embed\/bTqVqk7FSmY?origin=https:\/\/yourdomain.com&amp;amp;iv_load_policy=3&amp;amp;modestbranding=1&amp;amp;playsinline=1&amp;amp;showinfo=0&amp;amp;rel=0&amp;amp;enablejsapi=1\"\r\nallowfullscreen\r\nallowtransparency\r\nallow=\"autoplay\"\r\n&gt;&lt;\/iframe&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<p>Ch\u00fa \u00fd: Class <strong>plyr__video-embed<\/strong> s\u1ebd l\u00e0m video \u0111\u01b0\u1ee3c nh\u00fang responsive \u1edf t\u1ec9 l\u1ec7 ph\u1ed5 bi\u1ebfn l\u00e0 16:9. Khi Plyr t\u1ef1 kh\u1edfi \u0111\u1ed9ng, t\u1ec9 l\u1ec7 t\u00f9y ch\u1ec9nh do b\u1ea1n thi\u1ebft l\u1eadp s\u1ebd \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng.<\/p>\r\n<p><strong>C\u00e1ch 2:<\/strong><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div id=\"player\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"bTqVqk7FSmY\"&gt;&lt;\/div&gt;<\/pre>\r\n<p>Ch\u00fa \u00fd: Gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh <strong>data-plyr-embed-id<\/strong> c\u00f3 th\u1ec3 l\u00e0 Video ID ho\u1eb7c Url c\u1ee7a video<\/p>\r\n<h3>Vimeo<\/h3>\r\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1601\" src=\"https:\/\/anhduc.org\/wp-content\/uploads\/2021\/05\/Plyr-vimeo-player-html5.jpg\" alt=\"Plyr-vimeo-player-html5\" width=\"580\" height=\"333\" \/><\/p>\r\n<p>Xem <a href=\"https:\/\/codepen.io\/pen?template=bKeXNq\" target=\"_blank\" rel=\"noopener\">Demo<\/a><\/p>\r\n<p>Gi\u1ed1ng nh\u01b0 youtube<\/p>\r\n<p><strong>C\u00e1ch 1:<\/strong><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"plyr__video-embed\" id=\"player\"&gt;\r\n&lt;iframe\r\nsrc=\"https:\/\/player.vimeo.com\/video\/76979871?loop=false&amp;amp;byline=false&amp;amp;portrait=false&amp;amp;title=false&amp;amp;speed=true&amp;amp;transparent=0&amp;amp;gesture=media\"\r\nallowfullscreen\r\nallowtransparency\r\nallow=\"autoplay\"\r\n&gt;&lt;\/iframe&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<p><strong>C\u00e1ch 2:<\/strong><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div id=\"player\" data-plyr-provider=\"vimeo\" data-plyr-embed-id=\"76979871\"&gt;&lt;\/div&gt;<\/pre>\r\n<h2>JavaScript<\/h2>\r\n<h3>Stream Dash.js<\/h3>\r\n<p><img decoding=\"async\" class=\"aligncenter size-medium wp-image-1602\" src=\"https:\/\/anhduc.org\/wp-content\/uploads\/2021\/05\/Plyr-streaming-dash-600x340.jpg\" alt=\"Plyr-streaming-dash\" width=\"600\" height=\"340\" \/><\/p>\r\n<p>Xem <a href=\"https:\/\/codepen.io\/pen?template=GRoogML\" target=\"_blank\" rel=\"noopener\">Demo<\/a><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;video controls crossorigin playsinline poster=\"https:\/\/bitdash-a.akamaihd.net\/content\/sintel\/poster.png\"&gt;&lt;\/video&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.dashjs.org\/latest\/dash.all.min.js\"&gt;\r\n\r\n&lt;script&gt;\r\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\r\n\/\/ First real dialog starts around 1:47\r\nconst source = 'https:\/\/bitmovin-a.akamaihd.net\/content\/sintel\/sintel.mpd';\r\n\/\/ For more dash options, see https:\/\/github.com\/Dash-Industry-Forum\/dash.js\r\nconst dash = dashjs.MediaPlayer().create();\r\nconst video = document.querySelector('video');\r\ndash.initialize(video, source, true);\r\n\r\n\/\/ Update caption tracks after initializing Plyr to get the generated captions\r\n\/\/ For more options see: https:\/\/github.com\/sampotts\/plyr\/#options\r\nconst player = new Plyr(video, {captions: {active: true, update: true}});\r\n\r\n\/\/ Expose player and dash so they can be used from the console\r\nwindow.player = player;\r\nwindow.dash = dash;\r\n});\r\n&lt;\/script&gt;<\/pre>\r\n<h3>Stream Hls.js<\/h3>\r\n<p><img decoding=\"async\" class=\"aligncenter size-medium wp-image-1603\" src=\"https:\/\/anhduc.org\/wp-content\/uploads\/2021\/05\/Plyr-streaming-hls-600x340.jpg\" alt=\"Plyr-streaming-hls\" width=\"600\" height=\"340\" \/><\/p>\r\n<p>Xem <a href=\"https:\/\/codepen.io\/pen?template=GRoogML\" target=\"_blank\" rel=\"noopener\">Demo<\/a><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;video controls crossorigin playsinline poster=\"https:\/\/bitdash-a.akamaihd.net\/content\/sintel\/poster.png\"&gt;&lt;\/video&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.rawgit.com\/video-dev\/hls.js\/18bb552\/dist\/hls.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script&gt;\r\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\r\nconst source = 'https:\/\/bitdash-a.akamaihd.net\/content\/sintel\/hls\/playlist.m3u8';\r\nconst video = document.querySelector('video');\r\n\r\n\/\/ For more options see: https:\/\/github.com\/sampotts\/plyr\/#options\r\n\/\/ captions.update is required for captions to work with hls.js\r\nconst player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}});\r\n\r\nif (!Hls.isSupported()) {\r\nvideo.src = source;\r\n} else {\r\n\/\/ For more Hls.js options, see https:\/\/github.com\/dailymotion\/hls.js\r\nconst hls = new Hls();\r\nhls.loadSource(source);\r\nhls.attachMedia(video);\r\nwindow.hls = hls;\r\n\r\n\/\/ Handle changing captions\r\nplayer.on('languagechange', () =&gt; {\r\n\/\/ Caption support is still flaky. See: https:\/\/github.com\/sampotts\/plyr\/issues\/994\r\nsetTimeout(() =&gt; hls.subtitleTrack = player.currentTrack, 50);\r\n});\r\n}\r\n\r\n\/\/ Expose player so it can be used from the console\r\nwindow.player = player;\r\n});\r\n&lt;\/script&gt;<\/pre>\r\n<h3>Stream Shaka Player<\/h3>\r\n<p><img decoding=\"async\" class=\"aligncenter size-medium wp-image-1604\" src=\"https:\/\/anhduc.org\/wp-content\/uploads\/2021\/05\/Plyr-streaming-shaka-500x340.jpg\" alt=\"Plyr-streaming-shaka\" width=\"500\" height=\"340\" \/><\/p>\r\n<p>Xem <a href=\"https:\/\/codepen.io\/pen?template=ZRpzZO\" target=\"_blank\" rel=\"noopener\">Demo<\/a><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;video controls crossorigin playsinline poster=\"https:\/\/ia800603.us.archive.org\/30\/items\/Tears-of-Steel\/tos-poster.jpg\"&gt;&lt;\/video&gt;\r\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/shaka-player\/2.4.0\/shaka-player.compiled.js\"&gt;\r\n\r\n&lt;script&gt;\r\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\r\nconst source = 'https:\/\/demo.unified-streaming.com\/video\/tears-of-steel\/tears-of-steel-en.ism\/.mpd';\r\nconst video = document.querySelector('video');\r\n\/\/ For options (second argument) see: https:\/\/github.com\/sampotts\/plyr\/#options\r\nconst player = new Plyr(video);\r\n\/\/ Expose player so it can be used from the console\r\nwindow.player = player;\r\n\r\n\/\/ For more Shaka Player options, see: https:\/\/github.com\/google\/shaka-player\r\nif (shaka.Player.isBrowserSupported()) {\r\n\/\/ Install built-in polyfills\r\nshaka.polyfill.installAll();\r\nconst shakaInstance = new shaka.Player(video);\r\nshakaInstance.load(source);\r\n} else {\r\nconsole.warn('Browser is not supported!');\r\n}\r\n});\r\n&lt;\/script&gt;<\/pre>\r\n<h2>Ch\u00e8n qu\u1ea3ng c\u00e1o v\u00e0o video b\u1eb1ng Plyr<\/h2>\r\n<p><strong>Plyr<\/strong> h\u1ed7 tr\u1ee3 ch\u00e8n qu\u1ea3ng c\u00e1o trong video th\u00f4ng qua <a href=\"https:\/\/vi.ai\/publisher-video-monetization\/?aid=plyrio\" target=\"_blank\" rel=\"noopener\">vi.ai<\/a> ch\u1ec9 b\u1eb1ng v\u00e0i thao t\u00e1c \u0111\u01a1n gi\u00e1n<\/p>\r\n<p>\u0110\u0103ng k\u00fd m\u1ed9t t\u00e0i kho\u1ea3n vi.ai\u00a0<\/p>\r\n<p>L\u1ea5y ID nh\u00e0 xu\u1ea5t b\u1ea3n c\u1ee7a b\u1ea1n<\/p>\r\n<p>Thi\u1ebft l\u1eadp qu\u1ea3ng c\u00e1o v\u00e0 g\u1eafn ID nh\u00e0 xu\u1ea5t b\u1ea3n c\u1ee7a b\u1ea1n v\u00e0o video.<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;video src=\"\/path\/to\/video.mp4\" id=\"player\" controls data-plyr-config='{ \"ads\": \"enabled: true, publisherId: 'Your_Vi_ID', tagUrl: ''\" }'&gt;&lt;\/video&gt;<\/pre>\r\n<p>N\u1ebfu kh\u00f4ng mu\u1ed1n s\u1eed d\u1ee5ng Vi, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t t\u00f9y ch\u1ecdn <strong>ads.tagUrl<\/strong> c\u1ee7a ri\u00eang m\u00ecnh.<\/p>\r\n<h2>T\u00f9y bi\u1ebfn giao di\u1ec7n Plyr<\/h2>\r\n<p>N\u1ebfu b\u1ea1n mu\u1ed1n thay \u0111\u1ed5i giao di\u1ec7n c\u1ee7a player, b\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i c\u00e1c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\" target=\"_blank\" rel=\"noopener\"> tham s\u1ed1 CSS t\u00f9y ch\u1ec9nh\u00a0<\/a><\/p>\r\n<p>B\u1ea1n c\u00f3 th\u1ec3 thi\u1ebft l\u1eadp cho to\u00e0n b\u1ed9 c\u00e1c player trong th\u1ebb root:<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">:root { --plyr-color-main: #1ac266; }<\/pre>\r\n<p>ho\u1eb7c cho m\u1ed9t player c\u1ee5 th\u1ec3<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">.player { --plyr-color-main: #1ac266; }<\/pre>\r\n<p>ho\u1eb7c ngay trong th\u1ebb &lt;video&gt;<\/p>\r\n<div class=\"highlight highlight-text-html-basic\">\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;video class=\"player\" style=\"--plyr-color-main: #1ac266;\"&gt; ... &lt;\/video&gt;<\/pre>\r\n<pre><span class=\"pl-kos\"><br \/><a href=\"https:\/\/github.com\/sampotts\/plyr#customizing-the-css\" target=\"_blank\" rel=\"noopener\">Xem danh s\u00e1ch c\u00e1c thu\u1ed9c t\u00ednh h\u1ed7 tr\u1ee3<\/a><br \/><br \/><\/span><\/pre>\r\n<h2>Hi\u1ec3n th\u1ecb ph\u1ee5 \u0111\u1ec1\u00a0<\/h2>\r\n<p><img decoding=\"async\" class=\"aligncenter size-medium wp-image-1614\" src=\"https:\/\/anhduc.org\/wp-content\/uploads\/2021\/05\/Plyr-caption-webvtt-600x340.jpg\" alt=\"Plyr-caption-webvtt\" width=\"600\" height=\"340\" \/><\/p>\r\n<p>Plyr h\u1ed7 tr\u1ee3 ph\u1ee5 \u0111\u1ec1 \u0111\u1ecbnh d\u1ea1ng <strong>WebVTT<\/strong>, \u0111\u1ec3 th\u00eam ph\u1ee5 \u0111\u1ec1 v\u00e0o video s\u1eed d\u1ee5ng th\u1ebb <strong>&lt;track&gt;<\/strong>. Tr\u01b0\u1edbc khi th\u00eam ph\u1ee5 \u0111\u1ec1 b\u1ea1n ph\u1ea3i ch\u1eafc ch\u1eafn r\u1eb1ng file ph\u1ee5 \u0111\u1ec1 \u0111\u00fang \u0111\u1ecbnh d\u1ea1ng, b\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m tra ph\u1ee5 \u0111\u1ec1 t\u1ea1i <a href=\"https:\/\/quuz.org\/webvtt\/\" target=\"_blank\" rel=\"noopener\">\u0111\u00e2y<\/a>.<\/p>\r\n<p>M\u1ed9t video c\u00f3 th\u1ec3 c\u00f3 nhi\u1ec1u ph\u1ee5 \u0111\u1ec1<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;track kind=\"captions\" label=\"English captions\" src=\"\/path\/to\/captions.vtt\" srclang=\"en\" default \/&gt;<\/pre>\r\n<h2>C\u00e1c Option cho video<\/h2>\r\n<p>Khai b\u00e1o c\u00e1c tham s\u1ed1 cho video khi kh\u1edfi t\u1ea1o player<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">const player = new Plyr('#player', {\r\ntitle: 'Example Title',\r\n});<\/pre>\r\n<p>Ho\u1eb7c khai b\u00e1o tr\u1ef1c ti\u1ebfp trong th\u1ebb <strong>&lt;video&gt;<\/strong> b\u1eb1ng thu\u1ed9c t\u00ednh <strong>data-plyr-config<\/strong><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;video src=\"\/path\/to\/video.mp4\" id=\"player\" controls data-plyr-config='{ \"title\": \"Example Title\" }'&gt;&lt;\/video&gt;<\/pre>\r\n<p>M\u1ed9t s\u1ed1 thu\u1ed9c t\u00ednh th\u01b0\u1eddng d\u00f9ng<\/p>\r\n<p><strong>&#8220;autoplay&#8221;:&#8221;true&#8221;<\/strong> \/\/ Thi\u1ebft l\u1eadp autoplay<br \/><strong>&#8220;seekTime&#8221;:&#8221;10&#8243;<\/strong> \/\/ Thi\u1ebft l\u1eadp th\u1eddi gian tua<br \/><strong>&#8220;volume&#8221;:&#8221;1&#8243;<\/strong> \/\/ Thi\u1ebft l\u1eadp t\u00e2m l\u01b0\u1ee3ng<br \/><strong>&#8220;mute&#8221;:&#8221;false&#8221;<\/strong> \/\/ Thi\u1ebft l\u1eadp t\u1eaft \u00e2m thanh<br \/><strong>&#8220;hideControls&#8221;:&#8221;true&#8221;<\/strong> \/\/ Thi\u1ebft l\u1eadp hi\u1ec3n th\u1ecb thanh \u0111i\u1ec1u khi\u1ec3n<br \/><strong>&#8220;captions&#8221;:&#8221;active: false, language: &#8216;auto&#8217;, update: false&#8221;<\/strong> \/\/ Thi\u1ebft l\u1eadp hi\u1ec3n th\u1ecb ph\u1ee5 \u0111\u1ec1<br \/><strong>&#8220;speed&#8221;:&#8221;selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]&#8221;<\/strong> \/\/ Thi\u1ebft l\u1eadp t\u1ed1c \u0111\u1ed9 ph\u00e1t.<br \/><strong>&#8220;quality&#8221;:&#8221;default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]&#8221;<\/strong> \/\/ Thi\u1ebft l\u1eadp ch\u1ea5t l\u01b0\u1ee3ng video<\/p>\r\n<p><span class=\"pl-kos\"><a href=\"https:\/\/github.com\/sampotts\/plyr#options\" target=\"_blank\" rel=\"noopener\">Xem danh s\u00e1ch c\u00e1c tham s\u1ed1<\/a><\/span><\/p>\r\n<p>M\u1ed9t c\u00e1ch kh\u00e1c \u0111\u1ec3 khai b\u00e1o c\u00e1c tham s\u1ed1 cho video l\u00e0 khai b\u00e1o trong player.source<\/p>\r\n<p><strong>V\u1edbi Video:<\/strong><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">player.source = {\r\ntype: 'video',\r\ntitle: 'Example title',\r\nsources: [\r\n{\r\nsrc: '\/path\/to\/movie.mp4',\r\ntype: 'video\/mp4',\r\nsize: 720,\r\n},\r\n{\r\nsrc: '\/path\/to\/movie.webm',\r\ntype: 'video\/webm',\r\nsize: 1080,\r\n},\r\n],\r\nposter: '\/path\/to\/poster.jpg',\r\npreviewThumbnails: {\r\nsrc: '\/path\/to\/thumbnails.vtt',\r\n},\r\ntracks: [\r\n{\r\nkind: 'captions',\r\nlabel: 'English',\r\nsrclang: 'en',\r\nsrc: '\/path\/to\/captions.en.vtt',\r\ndefault: true,\r\n},\r\n{\r\nkind: 'captions',\r\nlabel: 'French',\r\nsrclang: 'fr',\r\nsrc: '\/path\/to\/captions.fr.vtt',\r\n},\r\n],\r\n};<\/pre>\r\n<p><strong>V\u1edbi Audio:<\/strong><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">player.source = {\r\ntype: 'audio',\r\ntitle: 'Example title',\r\nsources: [\r\n{\r\nsrc: '\/path\/to\/audio.mp3',\r\ntype: 'audio\/mp3',\r\n},\r\n{\r\nsrc: '\/path\/to\/audio.ogg',\r\ntype: 'audio\/ogg',\r\n},\r\n],\r\n};\r\n\r\nV\u1edbi Youtube\r\n\r\nplayer.source = {\r\ntype: 'video',\r\nsources: [\r\n{\r\nsrc: 'bTqVqk7FSmY',\r\nprovider: 'youtube',\r\n},\r\n],\r\n};<\/pre>\r\n<p><strong>V\u1edbi Vimeo:<\/strong><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">player.source = { type: 'video', sources: [ { src: '143418951', provider: 'vimeo', }, ], };<\/pre>\r\n<pre><span class=\"pl-kos\"><br \/>Tr\u00ean \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 c\u00e1ch d\u00f9ng Plyr m\u00ecnh th\u1ea5y c\u1ea7n thi\u1ebft, chi ti\u1ebft h\u01a1n b\u1ea1n c\u00f3 th\u1ec3 xem th\u00eam trong <a href=\"https:\/\/github.com\/sampotts\/plyr\" target=\"_blank\" rel=\"noopener\">Document<\/a> c\u1ee7a Plyr.<br \/>N\u1ebfu c\u00f3 g\u00ec th\u1eafc m\u1eafc b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ec3 l\u1ea1i comment d\u01b0\u1edbi \u0111\u00e2y nh\u00e9.<\/span><\/pre>\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":[],"jnews_primary_category":[],"jnews_social_meta":[],"jnews_override_counter":[],"footnotes":""},"categories":[],"tags":[],"class_list":["post-1587","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/anhduc.org\/index.php?rest_route=\/wp\/v2\/posts\/1587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anhduc.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/anhduc.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/anhduc.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anhduc.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1587"}],"version-history":[{"count":25,"href":"https:\/\/anhduc.org\/index.php?rest_route=\/wp\/v2\/posts\/1587\/revisions"}],"predecessor-version":[{"id":1619,"href":"https:\/\/anhduc.org\/index.php?rest_route=\/wp\/v2\/posts\/1587\/revisions\/1619"}],"wp:attachment":[{"href":"https:\/\/anhduc.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anhduc.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/anhduc.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}