Phát trực tiếp HTML5


76

Đối với trường học, tôi cần thiết lập một trang web phát trực tiếp HTML5. Họ có một trình phát trực tuyến flash mà họ đã sử dụng nhưng bây giờ họ muốn nó sử dụng HTML5 thay thế. Tôi có thể làm cái này như thế nào? Tôi đã thử sử dụng thẻ video nhưng không thể làm cho nó hoạt động. Dưới đây là mã tôi có. Ai đó có thể chỉ cho tôi theo hướng chính xác?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Deltion Live Streaming</title>
    <script language="javascript" type="text/javascript" src="../swfobject.js"></script>
</head>

<body>  

    <video id="movie" width="460" height="306" preload autoplay>
        <source src="rtmp://fl2.sz.xlcdn.com:80/sz=Deltion_College=lb1"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
            <!-- HERE THE CODE FOR THE ALTERNATIVE PLAYER (FLASH) WILL BE! -->
    </video>
</body>
</html>


Câu trả lời:


23

Một thay thế khả thi cho điều đó:

  1. Sử dụng bộ mã hóa (ví dụ: VLC hoặc FFmpeg) để điều chỉnh luồng đầu vào của bạn sang định dạng OGG. Ví dụ: trong trường hợp này, tôi đã sử dụng VLC để điều chỉnh thiết bị chụp màn hình bằng mã này:

    C: \ Program Files \ VideoLAN \ VLC \ vlc.exe -Màn hình giả: //: screen-fps = 16.000000: screen-caching = 100: south = # transcode {vcodec = theo, vb = 800, scale = 1, width = 600, height = 480, acodec = mp3}: http {mux = ogg, dst = 127.0.0.1: 8080 / desktop.ogg}: no-south-rtp-sap: no-south-standard-sap: ttl = 1: hướng nam

  2. Nhúng mã này vào một <video>thẻ trong trang HTML của bạn như vậy:

    <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay" />

Cái này cần phải dùng mẹo. Tuy nhiên, đó là loại hiệu suất kém và loại vùng chứa AFAIK MP4 nên có hỗ trợ tốt hơn giữa các trình duyệt so với OGG.


1
Hoạt động tốt trên mọi PC. Nhưng tôi không thể làm cho nó hoạt động trên thiết bị di động (ví dụ: từ Chrome trên Android). Bất kỳ ý tưởng?
Adorjan Princz

@AdorjanPrincz Đây có thể là do thiếu bộ giải mã ogg trên Android / Chrome. Thử các định dạng video (và / hoặc vùng chứa) khác nhau.
Zsolt

18

Có thể phát trực tiếp bằng HTML5 thông qua việc sử dụng Tiện ích mở rộng nguồn phương tiện (MSE) - tiêu chuẩn W3C tương đối mới: https://www.w3.org/TR/media-source/ MSE là một phần mở rộng của <video>thẻ HTML5 ; javascript trên trang web có thể tìm nạp các đoạn âm thanh / video từ máy chủ và đẩy chúng sang MSE để phát lại. Cơ chế tìm nạp có thể được thực hiện thông qua các yêu cầu HTTP (MPEG-DASH) hoặc qua WebSockets. Kể từ tháng 9 năm 2016, tất cả các trình duyệt chính trên tất cả các thiết bị đều hỗ trợ MSE. iOS là ngoại lệ duy nhất.

Để phát trực tuyến video trực tiếp HTML5 có độ trễ cao (hơn 5 giây), bạn có thể cân nhắc triển khai MPEG-DASH bằng video.js hoặc công cụ phát trực tuyến Wowza.

Để có độ trễ thấp, phát trực tiếp video HTML5 gần thời gian thực, hãy xem máy chủ phương tiện EvoStream, máy chủ phương tiện Unreal và WebRTC.


15

Ngay bây giờ, nó sẽ chỉ hoạt động trong một số trình duyệt và theo như tôi có thể thấy thì bạn chưa thực sự liên kết với một tệp, vì vậy điều đó sẽ giải thích tại sao nó không phát.

nhưng khi bạn muốn phát trực tiếp (mà tôi chưa thử nghiệm với)

kiểm tra Phát trực tuyến qua RTSP hoặc RTP trong HTML5

http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/25-HTML5-Video-Resources-You-Might-Have-Missed-74010.aspx


12

Trước tiên, bạn cần thiết lập một máy chủ phát trực tuyến đa phương tiện. Bạn có thể sử dụng Wowza, red5 hoặc nginx-rtmp-module . Đọc tài liệu của họ và thiết lập trên hệ điều hành bạn muốn. Tất cả các công cụ đều hỗ trợ HLS (giao thức Http Live Stream được phát triển bởi Apple). Bạn nên đọc tài liệu về cấu hình. Ví dụ với nginx-rtmp-module:

rtmp {
    server {
        listen 1935; # Listen on standard RTMP port
        chunk_size 4000;

        application show {
            live on;
            # Turn on HLS
            hls on;
            hls_path /mnt/hls/;
            hls_fragment 3;
            hls_playlist_length 60;
            # disable consuming the stream from nginx as rtmp
            deny play all;
        }
    }
} 

server {
    listen 8080;

    location /hls {
        # Disable cache
        add_header Cache-Control no-cache;

        # CORS setup
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        add_header 'Access-Control-Allow-Headers' 'Range';

        # allow CORS preflight requests
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Headers' 'Range';
            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;
        }

        root /mnt/;
    }
}

Sau khi máy chủ được thiết lập và cấu hình thành công. bạn phải sử dụng một số phần mềm mã hóa rtmp (OBS, wirecast ...) để bắt đầu phát trực tuyến như youtube hoặc twitchtv.

Ở phía máy khách (trong trường hợp của bạn là trình duyệt), bạn có thể sử dụng Videojs hoặc JWplayer để phát video cho người dùng cuối. Bạn có thể làm điều gì đó như bên dưới cho Videojs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Streaming</title>
    <link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/5.8/video.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
    <source src="http://localhost:8080/hls/stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
    var player = videojs('#player');
</script>
</body>
</html>

Bạn không cần thêm plugin khác như flash (vì chúng tôi sử dụng HLS không phải rtmp). Trình phát này có thể hoạt động tốt trên nhiều trình duyệt mà không cần flash.


Tệp cấu hình của bạn dường như bỏ lỡ khối http cho phần máy chủ. Nhưng nhìn chung, rất khó để đưa doanh nghiệp phát trực tuyến này hoạt động.
Johncl

Trong phần HTML, bạn gọi stream.m3u8, tôi không thấy tên đó trong cấu hình máy chủ, bạn lấy ở đâu vậy?
user3058963

8

Không thể sử dụng giao thức RTMP trong HTML 5 vì giao thức RTMP chỉ được sử dụng giữa máy chủ và trình phát flash . Vì vậy, bạn có thể sử dụng các giao thức phát trực tuyến khác để xem video phát trực tuyến trong HTML 5.


4
các giao thức khác là gì?
eri

1
@eri HLS chẳng hạn
TGO

3

Bạn có thể sử dụng một tên thư viện tuyệt vời Videojs . Bạn sẽ tìm thấy nhiều thông tin hữu ích hơn ở đây. Nhưng với sự bắt đầu nhanh chóng, bạn có thể làm điều gì đó như sau:

<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
<video 
id="Video" 
class="video-js vjs-default-skin vjs-big-play-centered" 
controls 
preload="none" 
width="auto" 
height="auto" 
poster="poster.jpg" 
data-setup='{"techOrder": ["flash", "html5", "other supported tech"], "nativeControlsForTouch": true, "controlBar": { "muteToggle": false, "volumeControl": false, "timeDivider": false, "durationDisplay": false, "progressControl": false } }'
>
<source src="rtmp://{domain_server}/{publisher}" type='rtmp/mp4'/>
</video>
<script>
var player = videojs('Video');
player.play();
</script>

0

Sử dụng ffmpeg + ffserver. Nó hoạt động !!! Bạn có thể lấy tệp cấu hình cho ffserver từ ffmpeg.org và theo đó đặt các giá trị.


9
Vui lòng đăng các lệnh và cấu hình của bạn, tôi đang gặp một chút vấn đề.
Gustav

-9
<object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
            height="285" id="mediaPlayer" standby="Loading Microsoft Windows Media Player components..."
            type="application/x-oleobject" width="360" style="margin-bottom:30px;">
            <param name="fileName" value="mms://my_IP_Address:my_port" />
            <param name="animationatStart" value="true" />
            <param name="transparentatStart" value="true" />
            <param name="autoStart" value="true" />
            <param name="showControls" value="true" />
            <param name="loop" value="true" />
            <embed autosize="-1" autostart="true" bgcolor="darkblue" designtimesp="5311" displaysize="4"
                height="285" id="mediaPlayer" loop="true" name="mediaPlayer" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
                showcontrols="true" showdisplay="0" showstatusbar="-1" showtracker="-1" src="mms://my_IP_Address:my_port"
                type="application/x-mplayer2" videoborder3d="-1" width="360"></embed>
</object>

11
Câu trả lời chỉ có mã không hữu ích. Bạn sẽ có cơ hội tốt hơn để giúp đỡ ai đó (và nhận được sự ủng hộ) nếu bạn đưa vào một phần giải thích ngắn gọn trong mỗi câu trả lời.
quân nhân

1
@AsongAmagin Bạn đang thiếu thẻ đóng cho phần tử đối tượng đó.
TylerH

Chỉ dành cho Windows, vì vậy sẽ mất tất cả sự hỗ trợ đa nền tảng mà HTML 5 cung cấp.
AlastairG
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.