• Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
Friday, 31 March, 2023
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
No Result
View All Result
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
Home Hướng dẫn

[Hướng dẫn] Sử dụng NGINX, RTMP và HLS làm server streaming videos

Harris by Harris
28/12/2022
in Hướng dẫn, Tài liệu
Reading Time: 16 mins read
0
huanvmdotcom streaming video using
10
SHARES
31
VIEWS
Share to FacebookShare to TwitterPin on Pinterest

Mục lục bài viết

  1. VOD (Video on demand) là gì
  2. RTMP
  3. HLS
  4. Mã hóa
  5. RTMP
  6. HLS
  7. Hỗ trợ client
    1. Với giao thức RTMP
    2. Với giao thức HLS
  8. Setup basic
    1. Install ffmpeg
    2. Install nginx
    3. Setup NGINX RTMP using nginx-rtmp-module
    4. Setup NGINX HLS
    5. Demo

Bài viết hôm nay mình sẽ hướng dẫn các bạn streaming videos qua Nginx, RTMP và HLS. Trước tiên cùng mình tìm hiểu một vài định nghĩa nhé.

VOD (Video on demand) là gì

Video theo yêu cầu (VOD) hay âm thanh và video theo yêu cầu (AVOD) là hệ thống cho phép người dùng lựa chọn và xem / nghe nội dung video hoặc âm thanh khi họ chọn, thay vì phải xem vào một thời gian phát sóng cụ thể. Công nghệ IPTV thường được sử dụng để mang lại các video theo yêu cầu cho TV và máy tính cá nhân.

  • Có thể hiểu qua là chúng ta sẽ setup server trở thành một server chứa videos có sẵn, chúng ta có thể phát video trong danh sách có sẵn đó.

Ví dụ : Youtube, Netflix, Disney+ … là những hệ thống cung cấp videos trực tuyến có cung cấp video on demand. Và trong ví dụ này, chúng ta cũng có thế làm kiểu như vậy nhưng quy mô nhỏ hơn rất nhiều.

[Hướng dẫn] Sử dụng NGINX, RTMP và HLS làm server streaming videos

Trước khi vào phần ví dụ thì hãy cùng xem một vài định nghĩa về các giao thức mà chúng ta sẽ sử dụng nhé.

RTMP

RTMP là từ viết tắt của Real time messaging protocol. Giao thức RTMP ban đầu là một giao thức độc quyền được phát triển bởi Macromedia để truyền phát âm thanh, video và dữ liệu qua Internet, giữa trình phát Flash và máy chủ. Macromedia hiện thuộc sở hữu của Adobe, đã phát hành một phiên bản chưa hoàn chỉnh về đặc điểm kỹ thuật của giao thức để phát hành chính thức.

RTMP là một giao thức dựa trên TCP, duy trì các kết nối liên tục và cho phép giao tiếp với độ trễ thấp. Để phân phối luồng một cách trơn tru và truyền càng nhiều thông tin càng tốt, nó chia luồng thành các đoạn (fragments) và kích thước của chúng được thỏa thuận tùy vào thỏa thuận giữa máy khách và máy chủ. Đôi khi, kích thước đó được giữ nguyên.

Kích thước đoạn mặc định là 64 byte cho dữ liệu âm thanh và 128 byte cho dữ liệu video và hầu hết các loại dữ liệu khác. Các đoạn từ các luồng khác nhau sau đó có thể được xen kẽ và ghép thành một kết nối duy nhất.

Với các khối dữ liệu dài hơn, giao thức do đó chỉ mang một tiêu đề một byte cho mỗi đoạn, do đó phát sinh rất ít băng thông. Tuy nhiên, trong thực tế, các mảnh riêng lẻ thường không được xen kẽ. Thay vào đó, việc xen kẽ và ghép kênh được thực hiện ở cấp gói, với các gói RTMP trên một số kênh hoạt động khác nhau được xen kẽ để đảm bảo mỗi kênh đáp ứng băng thông, độ trễ và các yêu cầu chất lượng dịch vụ khác. Các gói xen kẽ trong thời gian này được coi là không thể chia cắt, cũng như không xen kẽ ở cấp độ mảnh.

Nginx cung cấp cho chúng ta cách thức cấu hình rtmp thông qua nginx plus (https://www.nginx.com/products/nginx/modules/rtmp-media-streaming/), và vì phiên bản này có tính phí nên trong phạm vi bài viết này mình sẽ cấu hình bằng cách import thêm module cho nginx – nginx-rtmp-module (tác giả https://github.com/arut/)

HLS

HLS là từ viết tắt của HTTP live streaming, HLS là một HTTP-based adaptive bitrate streaming, một giao thức truyền bitrate dựa trên HTTP. HLS được lập trình bởi Apple Inc. Là một giao thức truyền phát nội dung đa phương tiện khá phổ biến.

HLS giống với MPEG-DASH ở chỗ nó hoạt động bằng cách chia luồng tổng thể thành một chuỗi các tệp tải xuống dựa trên HTTP, mỗi lần tải xuống tải một đoạn ngắn của một luồng truyền tải tổng thể có khả năng không bị ràng buộc. Một danh sách các luồng khả dụng, được mã hóa ở các tốc độ bit khác nhau, được gửi đến máy client bằng cách sử dụng danh sách phát m3u mở rộng.

Mã hóa

RTMP

Các phiên RTMP có thể được mã hóa bằng một trong hai phương pháp:

  • Sử dụng các cơ chế TLS / SSL tiêu chuẩn của ngành. Phiên RTMP cơ bản chỉ đơn giản được gói bên trong phiên TLS / SSL bình thường.
  • Sử dụng RTMPE, kết thúc phiên RTMP trong lớp mã hóa trọng lượng nhẹ hơn.

HLS

Dựa trên các giao dịch HTTP tiêu chuẩn, HLS có thể đi qua bất kỳ tường lửa hoặc máy chủ proxy nào cho phép lưu lượng HTTP tiêu chuẩn, không giống như các giao thức dựa trên UDP như RTP.

Điều này cũng cho phép nội dung được cung cấp từ các máy chủ HTTP thông thường và được phân phối trên các mạng phân phối nội dung dựa trên HTTP có sẵn rộng rãi. Tiêu chuẩn cũng bao gồm một cơ chế mã hóa tiêu chuẩn và phân phối khóa bảo mật dựa trên HTTPS, cùng nhau cung cấp một hệ thống DRM đơn giản. Các phiên bản sau này của giao thức cũng cung cấp khả năng tua nhanh và tua lại, tích hợp phụ đề.

Hỗ trợ client

Với giao thức RTMP

RTMP là giao thức base trên TCP, có độ trễ thấp nhưng lại được hỗ trợ không rộng rãi, muốn phát video trên web chúng ta phải cài đặt Flash.

Từ khi Apple tuyên bố không hỗ trợ flash và tự phát triển giao thức riêng thì flash cũng từ đó ít được hỗ trợ hơn.

[Hướng dẫn] Sử dụng NGINX, RTMP và HLS làm server streaming videos

  • Adobe Flash Player (web browser plug-in): Windows, OS X, Chrome OS, Linux
  • Gnash (web browser plug-in/media player): Windows, Linux
  • VLC media player: Windows, OS X, Linux, iOS, Android
  • MPC-HC: Windows
  • XBMC Media Center: Windows, OS X, Linux, iOS (jailbroken), Android

Nguồn: https://en.wikipedia.org/wiki/Real-Time_Messaging_Protocol

Với giao thức HLS

HLS được hỗ trợ bởi hầu hết các nền tảng cũng như ứng dụng hiện nay.

Mặc định, HLS được hỗ trợ phát với:

  • Windows 10 (Microsoft Edge)
  • macOS 10.6+ (Safari and QuickTime)
  • iOS 3.0+ (Safari)
  • Andoid 4.1+ (Google Chrome)

Ngoài ra mọi người có thể tham khảo thêm link wiki để tìm hiểu thêm.

Nguồn: https://en.wikipedia.org/wiki/HTTP_Live_Streaming

Setup basic

Giới thiệu vậy đủ rồi, bây giờ mình sẽ trình bày các bước setup để stream video on demand sử dụng NGINX.

Lưu ý server mình sử dụng là server aws ec2 đang chạy ubuntu 16.04. Vì thế nên toàn bộ setup mình hướng dẫn trong bài viết này là sử dụng cho ubuntu 16.04.

Các hệ điều hành khác sẽ có cách cài đặt khác nhưng mình không đề cập đến trong bài này nhé.

Install ffmpeg

1
2
3
4
<span class="token function">sudo</span> add-apt-repository ppa:jonathonf/ffmpeg-4
<span class="token function">sudo</span> <span class="token function">apt-get</span> update
<span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> ffmpeg
 

Install nginx

Như đã nói ở phần đầu bài viết, mình sẽ sử dụng module free của tác giả Roman Arutyunyan. Và module này sẽ phải setup lúc cài nginx nên chúng ta không sử dụng apt-get để cài đặt.

1
2
3
4
5
6
7
8
9
10
<span class="token function">sudo</span> <span class="token function">apt</span> <span class="token function">install</span> build-essential -y
<span class="token function">wget</span> http://nginx.org/download/nginx-1.14.2.tar.gz
<span class="token function">tar</span> zxvf  nginx-1.14.2.tar.gz
<span class="token function">wget</span> https://ftp.pcre.org/pub/pcre/pcre-8.40.tar.gz
<span class="token function">tar</span> xzvf pcre-8.40.tar.gz
<span class="token function">wget</span> http://www.zlib.net/zlib-1.2.11.tar.gz
<span class="token function">tar</span> xzvf zlib-1.2.11.tar.gz
<span class="token function">wget</span> https://www.openssl.org/source/openssl-1.1.0f.tar.gz
<span class="token function">tar</span> xzvf openssl-1.1.0f.tar.gz
 

Tải và cài đặt module nginx-rtmp-module:

1
2
3
<span class="token function">wget</span> https://github.com/arut/nginx-rtmp-module/archive/master.zip
<span class="token function">unzip</span> master.zip
 

Cần lấy đường dẫn đến thư mục nginx-rtmp-module vừa giải nén.

Ở đây thư mục mình giải nén file zip ra là /home/uytv2/Downloads/nginx-rtmp-module-master vì thế mình sẽ để option như sau:

1
2
--add-module<span class="token operator">=</span><span class="token string">'/home/uytv2/Downloads/nginx-rtmp-module-master'</span>
 

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
<span class="token builtin class-name">cd</span> nginx-1.14.2
./configure --prefix<span class="token operator">=</span>/usr/share/nginx
            --sbin-path<span class="token operator">=</span>/usr/sbin/nginx
            --modules-path<span class="token operator">=</span>/usr/lib/nginx/modules
            --conf-path<span class="token operator">=</span>/etc/nginx/nginx.conf
            --error-log-path<span class="token operator">=</span>/var/log/nginx/error.log
            --http-log-path<span class="token operator">=</span>/var/log/nginx/access.log
            --pid-path<span class="token operator">=</span>/run/nginx.pid
            --lock-path<span class="token operator">=</span>/var/lock/nginx.lock
            --user<span class="token operator">=</span>www-data
            --group<span class="token operator">=</span>www-data
            --build<span class="token operator">=</span>Ubuntu
            --http-client-body-temp-path<span class="token operator">=</span>/var/lib/nginx/body
            --http-fastcgi-temp-path<span class="token operator">=</span>/var/lib/nginx/fastcgi
            --http-proxy-temp-path<span class="token operator">=</span>/var/lib/nginx/proxy
            --http-scgi-temp-path<span class="token operator">=</span>/var/lib/nginx/scgi
            --http-uwsgi-temp-path<span class="token operator">=</span>/var/lib/nginx/uwsgi
            --with-openssl<span class="token operator">=</span><span class="token punctuation">..</span>/openssl-1.1.0f
            --with-openssl-opt<span class="token operator">=</span>enable-ec_nistp_64_gcc_128
            --with-openssl-opt<span class="token operator">=</span>no-nextprotoneg
            --with-openssl-opt<span class="token operator">=</span>no-weak-ssl-ciphers
            --with-openssl-opt<span class="token operator">=</span>no-ssl3
            --with-pcre<span class="token operator">=</span><span class="token punctuation">..</span>/pcre-8.40
            --with-pcre-jit
            --with-zlib<span class="token operator">=</span><span class="token punctuation">..</span>/zlib-1.2.11
            --with-compat
            --with-file-aio
            --with-threads
            --with-http_addition_module
            --with-http_auth_request_module
            --with-http_dav_module
            --with-http_flv_module
            --with-http_gunzip_module
            --with-http_gzip_static_module
            --with-http_mp4_module
            --with-http_random_index_module
            --with-http_realip_module
            --with-http_slice_module
            --with-http_ssl_module
            --with-http_sub_module
            --with-http_stub_status_module
            --with-http_v2_module
            --with-http_secure_link_module
            --with-mail
            --with-mail_ssl_module
            --with-stream
            --with-stream_realip_module
            --with-stream_ssl_module
            --with-stream_ssl_preread_module
            --with-debug
            --add-module<span class="token operator">=</span><span class="token string">'/home/uytv2/Downloads/nginx-rtmp-module-master'</span>
 
<span class="token function">sudo</span> <span class="token function">make</span>
<span class="token function">sudo</span> <span class="token function">make</span> <span class="token function">install</span>
 

Check nginx version

1
2
<span class="token function">sudo</span> nginx -V
 

Sửa config sau để có thể sử dụng nginx bằng lệnh systemctl

1
2
<span class="token function">sudo</span> <span class="token function">nano</span> /etc/systemd/system/nginx.service
 

Dán cấu hình sau vào:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<span class="token punctuation">[</span>Unit<span class="token punctuation">]</span>
<span class="token assign-left variable">Description</span><span class="token operator">=</span>A high performance web server and a reverse proxy server
<span class="token assign-left variable">After</span><span class="token operator">=</span>network.target
 
<span class="token punctuation">[</span>Service<span class="token punctuation">]</span>
<span class="token assign-left variable">Type</span><span class="token operator">=</span>forking
<span class="token assign-left variable">PIDFile</span><span class="token operator">=</span>/run/nginx.pid
<span class="token assign-left variable">ExecStartPre</span><span class="token operator">=</span>/usr/sbin/nginx -t -q -g <span class="token string">'daemon on; master_process on;'</span>
<span class="token assign-left variable">ExecStart</span><span class="token operator">=</span>/usr/sbin/nginx -g <span class="token string">'daemon on; master_process on;'</span>
<span class="token assign-left variable">ExecReload</span><span class="token operator">=</span>/usr/sbin/nginx -g <span class="token string">'daemon on; master_process on;'</span> -s reload
<span class="token assign-left variable">ExecStop</span><span class="token operator">=</span>-/sbin/start-stop-daemon --quiet --stop --retry QUIT/5 --pidfile /run/nginx.pid
<span class="token assign-left variable">TimeoutStopSec</span><span class="token operator">=</span><span class="token number">5</span>
<span class="token assign-left variable">KillMode</span><span class="token operator">=</span>mixed
 
<span class="token punctuation">[</span>Install<span class="token punctuation">]</span>
<span class="token assign-left variable">WantedBy</span><span class="token operator">=</span>multi-user.target
 
 

Bấm Ctrl + X, gõ y để lưu lại

1
2
<span class="token function">sudo</span> <span class="token function">nano</span> /etc/ufw/applications.d/nginx
 

Dán đoạn text sau và lưu lai:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<span class="token punctuation">[</span><span class="token class-name">Nginx</span> <span class="token constant">HTTP</span><span class="token punctuation">]</span>
title<span class="token operator">=</span><span class="token class-name">Web</span> <span class="token class-name">Server</span> <span class="token punctuation">(</span><span class="token class-name">Nginx</span><span class="token punctuation">,</span> <span class="token constant">HTTP</span><span class="token punctuation">)</span>
description<span class="token operator">=</span><span class="token class-name">Small</span><span class="token punctuation">,</span> but very powerful and efficient web server
ports<span class="token operator">=</span><span class="token number">80</span><span class="token operator">/</span>tcp
 
<span class="token punctuation">[</span><span class="token class-name">Nginx</span> <span class="token constant">HTTPS</span><span class="token punctuation">]</span>
title<span class="token operator">=</span><span class="token class-name">Web</span> <span class="token class-name">Server</span> <span class="token punctuation">(</span><span class="token class-name">Nginx</span><span class="token punctuation">,</span> <span class="token constant">HTTPS</span><span class="token punctuation">)</span>
description<span class="token operator">=</span><span class="token class-name">Small</span><span class="token punctuation">,</span> but very powerful and efficient web server
ports<span class="token operator">=</span><span class="token number">443</span><span class="token operator">/</span>tcp
 
<span class="token punctuation">[</span><span class="token class-name">Nginx</span> <span class="token class-name">Full</span><span class="token punctuation">]</span>
title<span class="token operator">=</span><span class="token class-name">Web</span> <span class="token class-name">Server</span> <span class="token punctuation">(</span><span class="token class-name">Nginx</span><span class="token punctuation">,</span> <span class="token constant">HTTP</span> <span class="token operator">+</span> <span class="token constant">HTTPS</span><span class="token punctuation">)</span>
description<span class="token operator">=</span><span class="token class-name">Small</span><span class="token punctuation">,</span> but very powerful and efficient web server
ports<span class="token operator">=</span><span class="token number">80</span><span class="token punctuation">,</span><span class="token number">443</span><span class="token operator">/</span>tcp
 

Xong bước cài đặt module nginx-rtmp-module. Bây giờ chúng ta có thể sử dụng block rtmp trong config của nginx.

Setup NGINX RTMP using nginx-rtmp-module

1
2
3
<span class="token builtin class-name">cd</span> /etc/nginx
<span class="token function">sudo</span> <span class="token function">nano</span> nginx.conf
 

Thêm block rtmp vào cuối file và Ctrl + x để lưu lại:

nginx.conf :

1
2
3
4
5
6
7
8
9
rtmp {
    server {
        listen 1935;
        application myvideos {
           play /home/uytv2/videos;
        }
    }
}
 

Thư mục /home/uytv2/videos là thư mục chứa video contents. Chọn videos lưu vào đây để có thể stream. Videos có thể phát trực tiếp qua giao thức rtmp

1
2
rtmp://<span class="token tag"><span class="token punctuation">&lt;</span>ip-address <span class="token attr-name">or</span> <span class="token attr-name">domain</span> <span class="token attr-name">name</span><span class="token punctuation">&gt;</span></span>/myvideos/<span class="token tag"><span class="token punctuation">&lt;</span>videos <span class="token attr-name">name</span><span class="token punctuation">&gt;</span></span>
 

Setup NGINX HLS

HLS base trên giao thức http, vì thế chúng ta có thể khai báo hls ngay trong block http:

Cần include thư mục conf.d trong file /etc/nginx/nginx.conf, và các config khác mình cũng sẽ để ở đấy.

1
2
3
4
5
6
<span class="token selector">http</span> <span class="token punctuation">{</span>
...
  include /etc/nginx/conf.d<span class="token punctuation">;</span>
...
<span class="token punctuation">}</span>
 

Lưu ý:

Để có thể phát videos qua hls, chúng ta cần dùng ffmpeg convert video đó thành các file riêng lẻ dưới dạng .ts, và một playlist dưới dạng file .m3u8

Ví dụ video gốc là demo.mp4 thì convert thành các file: demo.m3u8, demo0.ts, demo1.ts, demo2.ts ...

1
2
ffmpeg -i demo.mp4 -profile:v baseline -level <span class="token number">3.0</span> -s 720x400 -start_number <span class="token number">0</span> -hls_time <span class="token number">10</span> -hls_list_size <span class="token number">0</span> -f hls /home/uytv2/videos/hls/demo.m3u8
 

Trong demo thư mục chứa videos playlist .m3u8 của mình là /home/uytv2/videos/hls, các bạn cần đổi đường dẫn cho phù hợp nhé.

Sample file /etc/nginx/conf.d/hls.conf

Ở file này hãy quan tâm đến block types: {} và alias. Block types khai báo mimes type cho các videos phát qua hls. Phần server_name thì cần đưa domain name vào. Nếu server của bạn không cần quản lý domains thì có thể để là gì cũng được.

Còn alias khai báo thư mục chứa videos playlist chúng ta vừa convert xong.

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
server {
    listen 80;
    root /var/www/html;
    server_name videos.uytran.cf;
    location /hls {
        # CORS setup
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length';
        # Allow CORS preflight requests
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
        add_header Cache-Control no-cache;
        alias /home/uytv2/videos/hls;
    }
}
 

Link playlist video của mình bây giờ sẽ là:

1
2
http://videos.uytran.cf/hls/demo.m3u8
 

update:

1
2
http<span class="token punctuation">:</span><span class="token operator">//</span>videos<span class="token punctuation">.</span>uytran<span class="token punctuation">.</span>tk<span class="token operator">/</span>hls<span class="token operator">/</span>video_1<span class="token punctuation">.</span>m3u8
 

Chúng chỉ cần trỏ link đến link playlist này là được.

Như vậy là xong setup cho nginx. Hãy restart nginx để update setup mới là xong 😄

1
2
<span class="token function">sudo</span> systemctl restart nginx
 

Demo

  • Với RTMP: Như list các ứng dụng hỗ trợ hai giao thức này mình có đề cập ở phần đầu bài viết. Vì giao thức rtmp hiện không còn được support rộng rãi.

Việc cài đặt flash player trên web cũng khá vất vả nên mình sẽ dùng phần mềm vlc media player để phát video nhé.

Ở cửa sổ vlc, chọn Media -> Open network stream và dán link videos vào là xong.

1
2
rtmp://uytran.cf/myvideos/demo.mp4
 

  • Với HLS chúng ta có nhiều lựa chọn hơn. Hls được hỗ trợ bởi trình phát vlc, vừa được hỗ trợ bời nhiều lib player js trên web.

Với hls thì mình sẽ sử dụng jwplayer trên web để phát videos.

1
2
http://videos.uytran.cf/hls/demo.m3u8
 

1
2
3
4
5
6
7
8
9
10
<span class="token tag"><span class="token punctuation">&lt;</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jwplayer.com/libraries/&lt;- your_jwplayer_key -&gt;.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>script<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>div <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myPlayer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>This text will be replaced with a player.<span class="token tag"><span class="token punctuation">&lt;/</span>div<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token function">jwplayer</span><span class="token punctuation">(</span><span class="token string">"myPlayer"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    file<span class="token operator">:</span> <span class="token string">"http://videos.uytran.cf/hls/demo.m3u8"</span><span class="token punctuation">,</span>
    height<span class="token operator">:</span> <span class="token number">360</span><span class="token punctuation">,</span>
    width<span class="token operator">:</span> <span class="token number">640</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>script<span class="token punctuation">&gt;</span></span>
 

Vậy là xong phần demo, hi vọng qua bài viết mọi người có thể setup được một server như ý muốn. Thanks for reading!

Nguồn bài viết của bạn Uy Trần trên Viblo

Digiprove sealCopyright protected by Digiprove © 2022
5/5 - (1 vote)
Chào ! Bạn thấy nội dung này thế nào?
Hữu ích 45Tạm được 43
Tags: server streaming
Previous Post

[Hướng dẫn] Hiển thị thông tin sản phẩm dạng Tooltip cho Woocommerce

Next Post

Cách dùng hook Woocommerce để hiển thị thông tin bên dưới sản phẩm

Harris

Harris

Thích du lịch, khám phá và thích vọc vạch

Next Post
Cách dùng hook Woocommerce để hiển thị thông tin bên dưới sản phẩm

Cách dùng hook Woocommerce để hiển thị thông tin bên dưới sản phẩm

Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận

KHUYÊN DÙNG

Cách dùng hook Woocommerce để hiển thị thông tin bên dưới sản phẩm

Cách dùng hook Woocommerce để hiển thị thông tin bên dưới sản phẩm

28/12/2022
55
[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce

[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce

28/12/2022
86

ĐANG THỊNH HÀNH

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

28/12/2022
6.3k
Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

30/12/2022
1.9k
Steinberg – Cubase Pro 12.0.0.205 x64

Steinberg – Cubase Pro 12.0.0.205 x64

24/03/2022
2k
[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce

[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce

28/12/2022
86
Tạo file Feed sản phẩm Woocommerce theo chuẩn Google Shopping

Tạo file Feed sản phẩm Woocommerce theo chuẩn Google Shopping

05/03/2022
253

GIỚI THIỆU

Chia sẻ thủ thuật IT, tải phần mềm miễn phí

Xin chào! Mình là Mạnh Huấn, website này mình xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức, thủ thuật máy tính, làm web WordPress, SEO, MMO, các phần mềm hay... mà mình biết cho tất cả mọi người. Cảm ơn các bạn đã ghé qua, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho mình nhé!

Theo dõi mình tại đây:

BÀI VIẾT GẦN ĐÂY

Hướng dẫn tạo Mega Menu tuỳ chỉnh trên Flatsome

Hướng dẫn tạo Mega Menu tuỳ chỉnh trên Flatsome

23/03/2023
Hướng dẫn fix lỗi Error message: Blacklisted domain trên CyberPanel

Hướng dẫn fix lỗi Error message: Blacklisted domain trên CyberPanel

08/03/2023
Code hiển thị đếm ngược khuyến mại và sản phẩm đã bán trên Woocommerce

Code hiển thị đếm ngược khuyến mại và sản phẩm đã bán trên Woocommerce

28/12/2022

HV MEDIA ON FACEBOOK

  • Giới thiệu
  • Chính sách bảo mật
  • Bản quyền
  • Liên hệ
  • Quảng cáo
  • Gửi yêu cầu
  • Báo link hỏng

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

No Result
View All Result
  • Home
  • Mac OS
    • Adobe
    • Developer Tools
    • Graphics & Design
    • Internet – Security
    • Productivity
    • Utilities
    • Video – Audio
  • Windows
    • Anti Virus
    • Development
    • Graphics & Design
    • Office – Study
    • Tools
    • Utilities
    • Video – Audio
  • Điện thoại
    • Apps, Game Cho iOS
    • Phần mềm Android
  • Thủ thuật
    • Thủ thuật máy tính
    • Thủ thuật Mobile
    • Thủ thuật Facebook
  • Game hay
    • Game MacOS
    • Game Windows
  • Website
  • Hướng dẫn
  • Tài liệu

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

wpDiscuz
0
0
Bạn đang nghĩ gì, hãy để lại bình luận nhé !x
()
x
| Phản hồi