video.js 다운로드 - video.js 소스 코드 다운로드

video.js

기타 소스코드

Unknown

다운로드

Video.js® - 웹 비디오 플레이어

Video.js는 모든 웹 기반 플랫폼을 위한 모든 기능을 갖춘 오픈 소스 비디오 플레이어입니다.

Video.js는 HLS 및 DASH와 같은 스트리밍 형식을 포함하여 웹에서 사용되는 모든 일반적인 미디어 형식을 즉시 지원합니다. 데스크톱, 모바일 장치, 태블릿, 웹 기반 스마트 TV에서 작동합니다. 강력한 플러그인 생태계를 통해 더욱 확장되고 사용자 정의될 수 있습니다.

Video.js는 2010년 중반에 시작되어 현재 여러 곳에서 사용되고 있습니다. ~~50,000~~ ~~100,000~~ ~~200,000~~ ~~400,000~~ ~~700,000~~ 800,000개의 웹사이트.

빠른 시작

Fastly의 훌륭한 사람들 덕분에 누구나 사용할 수 있는 Video.js의 무료 CDN 호스팅 버전이 있습니다. 문서의 <head> 에 다음 태그를 추가하세요.

 < link href =" //vjs.zencdn.net/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" //vjs.zencdn.net/8.19.1/video.min.js " > </ script >

또는 npm에서 가져오거나 GitHub 릴리스에서 다운로드하거나 unpkg 또는 CDNjs와 같은 다른 JavaScript CDN을 통해 Video.js를 포함할 수 있습니다.

 <!-- unpkg : use the latest version of Video.js -->
< link href =" https://unpkg.com/video.js/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/video.js/dist/video.min.js " > </ script >

<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
< link href =" https://unpkg.com/[email protected]/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/[email protected]/dist/video.min.js " > </ script >

<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
< link href =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video.min.js " > </ script >

다음으로, Video.js를 사용하는 것은 <video> 요소를 생성하는 것만큼 간단하지만 추가적인 data-setup 속성이 있습니다. 최소한 이 특성에는 '{}' 값이 있어야 하지만 모든 Video.js 옵션을 포함할 수 있습니다. 유효한 JSON이 포함되어 있는지 확인하세요!

 < video
    id =" my-player "
    class =" video-js "
    controls
    preload =" auto "
    poster =" //vjs.zencdn.net/v/oceans.png "
    data-setup =' {} ' >
  < source src =" //vjs.zencdn.net/v/oceans.mp4 " type =" video/mp4 " > </ source >
  < source src =" //vjs.zencdn.net/v/oceans.webm " type =" video/webm " > </ source >
  < source src =" //vjs.zencdn.net/v/oceans.ogv " type =" video/ogg " > </ source >
  < p class =" vjs-no-js " >
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    < a href =" https://videojs.com/html5-video-support/ " target =" _blank " >
      supports HTML5 video
    </ a >
  </ p >
</ video >

페이지가 로드되면 Video.js는 이 요소를 찾아 자동으로 그 자리에 플레이어를 설정합니다.

자동 설정을 사용하지 않으려면 data-setup 속성을 생략하고 videojs 함수를 사용하여 <video> 요소를 수동으로 초기화할 수 있습니다.

 var player = videojs ( 'my-player' ) ;

videojs 함수는 플레이어가 준비되면 호출할 options 객체와 콜백도 허용합니다.

 var options = { } ;

var player = videojs ( 'my-player' , options , function onPlayerReady ( ) {
  videojs . log ( 'Your player is ready!' ) ;

  // In this context, `this` is the player that was created by Video.js.
  this . play ( ) ;

  // How about an event listener?
  this . on ( 'ended' , function ( ) {
    videojs . log ( 'Awww...over so soon?!' ) ;
  } ) ;
} ) ;