HTML5 비디오 재생 플러그인 video.js 소개

video.js는 매우 인기 있는 HTML5 비디오 재생 플러그인입니다. 모바일 단말기(예: WeChat 웹 페이지)에서 동영상을 재생하는 데 매우 적합합니다. 강력한 기능을 갖추고 있으며 플래시로의 다운그레이드를 지원하며 IE8과 호환됩니다. 공식 웹사이트: http://videojs.com/git&demo: http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

컨트롤은 컨트롤 막대를 나타내고, prload: 사전 로드를 나타내고, 포스터는 초기 표시된 이미지를 나타냅니다. 데이터 세트는 json을 사용하여 일부 매개변수를 설정할 수 있도록 지원합니다. 말할 필요도 없이 출처는 자막을 의미합니다.

이런 식으로 나오지만 실제로는 다른 요구 사항이 있습니다.

데모의 alt 파일에 있는 novtt의 js를 적용해야 합니다. 이렇게 하면 문자 선택이 비디오 제어 막대에 나타나지 않습니다. 물론 페이지에 트랙 요소가 더 이상 필요하지 않습니다.

 <link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=stylesheet /><script src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>

CSS를 사용하여 직접 설정을 시작했지만 아무것도 작동하지 않는 것으로 나타났습니다. 비디오 요소는 내부 요소의 비율을 설정하여 반응형 너비와 높이를 구현해야 한다는 점에서 일반 요소와 다릅니다. video.js는 두 가지 방법을 제공합니다.

js: 유체를 true로 설정합니다.

 var player = videojs('video', {fluid: true }, function () { console.log('Good to go!'); this.play(); // 어떤 이유로 자동 재생을 신뢰하지 않는 경우 } )

하지만 이를 위해서는 비디오 요소의 시작 너비와 높이도 설정해야 합니다. 그렇지 않으면 시작 이미지가 표시되지 않습니다.

CSS: 스타일을 직접 추가할 수 있습니다. .vjs-fluid, .vjs-4-3, .vjs-16-9의 세 가지 유형이 있습니다. 첫 번째 유형은 자동으로 계산되고, 후자 두 유형은 비율을 지정합니다. 또한 스타일은 이미지를 표시하기 위한 시작 너비와 높이를 설정해야 합니다.

 <video id=video class=video-js vjs-default-skin vjs-fluid Poster=http://vjs.zencdn.net/v/oceans.png width=375 height=200 control preload=none data-setup=' { html5 : { NativeTextTracks : false } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> 동영상을 재생하려면 JavaScript를 활성화해야 합니다. HTML5를 지원하는 <a href=http://videojs.com/html5-video-support/ target=_blank> 브라우저를 사용하는 것이 좋습니다. /a>에 접속합니다. </p> </video>

이벤트 주의:

우리는 일반적으로 시작, 일시 중지, 종료의 세 가지 이벤트에 중점을 둡니다.

 var player = videojs('video', { }, function () { console.log('Good to go!'); //this.play(); // 어떤 이유로 자동 재생을 신뢰하지 않는 경우 }) ; player.on('재생', function () { console.log('재생 시작/다시 시작'); }) player.on('pause', function () { console.log('재생 일시 중지'); }); player.on('종료', function () { console.log('재생이 종료되었습니다'); });

업데이트 이벤트도 있습니다:

 player.on('timeupdate', function() { console.log(player.currentTime()); });

현재 시간과 총 시간이 같은지 판단하여 영상이 종료되는지 판단할 수 있습니다.

 player.on('timeupdate', function () { // currentTime() === Duration()인 경우 동영상 재생이 완료된 것입니다. if (player.duration() != 0 && player.currentTime() === player .duration()) { // 재생 종료} });

일부 선배님들께서는 안드로이드 기기에서는 종료된 이벤트가 제대로 실행되지 않는다는 점을 지적하셨습니다(먼저 준비하세요).

기본 iis MIME 설정에는 mp4 유형이 추가되지 않습니다. 로컬 재생에는 문제가 없지만 서버에 도달하면 404 오류가 발생합니다. 이를 위해서는 iis에서 MIME을 설정해야 합니다.

flv 형식은 관련 확장자: .flv, 콘텐츠 유형: application/octet-stream과 함께 추가됩니다.

f4v 형식은 확장자: .f4v, 콘텐츠 유형: application/octet-stream입니다.

mp4 형식은 확장자: .mp4, 콘텐츠 유형: video/mp4입니다.

ogv 형식은 확장자: .ogv, 콘텐츠 유형: video/ogg입니다.

webm 형식은 확장자: .webm, 콘텐츠 유형: video/webm입니다.

설정을 적용한 후 iis를 다시 시작하십시오.

공식은 편집하고 사용할 수 있는 코드펜 주소 http://codepen.io/heff/pen/EarCt를 제공했습니다. 주로 재생 버튼, 컨트롤 막대, 진행률 표시줄이 있습니다. 기본값은 위와 같습니다.

이것도 있습니다: http://codepen.io/zanechua/pen/GozrNe SublimeVideo

재생 기술은 브라우저나 플러그인에서 비디오 또는 오디오 파일을 재생하는 데 사용됩니다. h5인 경우 비디오 또는 오디오 요소를 사용합니다. 플래시뿐만 아니라 Silverlight, Quicktime 및 기타 재생 기술도 지원합니다. 데이터 설정은 요소에서 직접 정의할 수 있습니다. 지원되는 기술을 지정합니다.

 <video data-setup='{techOrder: [html5, 플래시, 기타 지원되는 기술]}'

또는 JavaScript를 사용하십시오.

 videojs(videoID, { techOrder: [html5, flash, 기타 지원되는 기술]});

여기서 기본 규칙은 첫 번째 기술을 사용하여 플레이하고, 실패하면 후속 옵션이 사용된다는 것입니다. 예를 들어 위에서 html5를 먼저 작성했다면 모든 동영상은 html5를 사용하여 재생됩니다. 플래시를 우선시하려면 플래시를 맨 앞에 두십시오.

 데이터 설정='{ 기술주문: [플래시,html5] }'

페이지 요소에서 video.js가 우리가 사용하는 플래시 개체를 제공한다는 것을 알 수 있습니다.

video 요소에 autoplay 속성을 추가하거나 js에 autoplay:true를 추가하세요.

 <video id=video autoplay Poster=/images/bk.png width=375 height=200 컨트롤 preload=none > </video>

또는

 var player = videojs('video', { autoplay:true }, function () { console.log('Good to go!'); //this.play(); // 보험, 적극적으로 play( ) });

자동재생은 항상 짜증나므로 그 반대는 자동재생 속성을 삭제하거나 false로 설정하는 것입니다.

다른:

video.js는 사용하기 매우 편리한 확장 플러그인을 지원합니다.

 //플러그인 함수 정의 examplePlugin(options) { this.on('play', function (e) { console.log('재생이 시작되었습니다!'); }) //videojs.plugin 등록(' examplePlugin' , examplePlugin); // player.examplePlugin({ exampleOption: true }) 사용;

플레이어의 API는 플러그인 내에서 직접 호출할 수 있습니다. 재생목록이 필요할 때 공부할 수 있는 재생목록 플러그인이 있습니다. https://github.com/brightcove/videojs-playlist 및 http://videojs.com/advanced/에는 다음과 같은 효과가 있습니다.

위 내용은 편집자가 소개한 HTML5 동영상 재생 플러그인 video.js에 대한 소개입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 편집자가 시간 내서 답변해 드리겠습니다. . 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!