집 >웹 프론트엔드 >JS 튜토리얼 >Video.js를 사용하여 H5 라이브 방송 인터페이스 구현

Video.js를 사용하여 H5 라이브 방송 인터페이스 구현

php中世界最好的语言원래의: 2018-03-06 16:33:598023검색

이번에는 Video.js를 사용하여 H5 라이브 방송 인터페이스를 구현하는 것과 Video.js를 사용하여 H5 라이브 방송 인터페이스를 구현하는 경우의 주의 사항을 소개하겠습니다. 다음은 실제 사례입니다. .

최근에 라이브 방송 페이지의 모바일 H5 단순화 버전을 만들었습니다. 나중에 공세와 선물을 추가할 예정입니다. 라이브 방송 녹화는 포함되지 않지만 저도 원합니다. 라이브 방송에 대해 알아보려면

1. 구성

사진과 같이 배경이 비디오 태그를 사용하여 라이브 방송을 재생합니다. 실시간으로 선물이나 애니메이션을 구현합니다.

2. 프로세스

모바일 단말기는 네이티브 시스템을 사용하고 PC는 obs 소프트웨어를 사용하여 스트리밍 미디어 서버인 rtmp를 통해 데이터 처리, 인코딩 및 푸시를 수행합니다. rtmp, hls, 재스트리밍, 오디오 및 비디오 디코딩, 재생과 같은 다양한 형식으로 재생을 생성합니다.

3. 푸시 스트리밍

RTMP

: Macromedia에서 개발한 실시간 메시지 전송 프로토콜입니다. 수정된 프로토콜은 TCP를 기반으로 하며 현재는 Flash/air 플랫폼에서 주로 사용됩니다. RTMP 프로토콜을 지원하는 스트리밍 미디어/인터랙티브 서버. 오디오, 비디오 및 데이터 간의 동심도.

장점: 프로토콜은 간단하고 다양한 플랫폼에서 구현하기 쉽고 우수한 CDN 지원을 제공합니다.

4. 당기기 흐름

이해를 통해 3가지 유형으로 나누어집니다.

RTMP: 본질적으로 긴 TCP 링크로, 매 순간의 데이터는 수신 후 즉시 짧은 대기 시간으로 전달됩니다.

-HTTP-FLV: 기본적으로 HTTP 긴 링크로, 매 순간의 데이터는 수신 후 즉시 짧은 대기 시간으로 전달됩니다.

-HLS: HTTP 짧은 링크, 우수한 크로스 플랫폼, 약간 더 높은 대기 시간. 여기에는 주로 .m3u8 파일과 .ts 파일의 두 가지 내용이 포함됩니다. m3u8의 URL을 요청하면 video 태그가 파일을 구문 분석하고 재생할 해당 ts 파일을 찾습니다.

5. 발생한 문제

주로 video.js 사용

QQx5 커널:

Android WeChat 및 qq 브라우저에서는 x5 커널로 인해 동영상 재생 시 시스템 재생 레이어가 팝업되지만 qq에는 있습니다. 브라우저에 버그가 있고 상단 레이어에 검은색 레이어가 있습니다. 해결책은 비디오 태그를 숨기는 것입니다.

라이브 방송 중 데이터 수신 시 rtmp 프로토콜이므로 직접 방송할 수 없습니다. .m3u8 형식으로 변환됩니다.

<source src="http://xxxxxx.m3u8" type=&#39;&#39;application/x-mpegURL" />

녹음 재생 시 데이터는 MP4 형식으로 수신되며 재생이 가능합니다. 직접 사용

<source src="http://xxxxxx.mp4" type=&#39;&#39;video/mp4" />

이 사례들을 읽어보셨을 거라 믿습니다. 방법을 익힌 후, 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!