소스 코드_javascript 기술을 사용하여 Flowplayer를 기반으로 무료 웹 비디오 플레이어를 만듭니다.

Flowplayer는 오픈 소스(GPL 3) 웹 비디오 플레이어입니다. 개발자인 경우 플레이어의 관련 매개변수를 자유롭게 사용자 정의하고 구성하여 원하는 재생 효과를 얻을 수도 있습니다. 이번 글에서는 주로 Flowplayer의 사용법을 소개합니다.

데모 보기 소스 코드 다운로드

Flowplayer는 flv, swf 및 이미지 파일과 같은 스트리밍 미디어 재생을 지원하며 비디오 파일을 매우 원활하게 재생할 수 있으며 사용자 정의 구성 및 확장을 지원합니다.

1. flowplayer.js를 로드합니다

동영상을 재생하려는 페이지 헤드 사이에 flowplayer.js를 추가하세요.

<script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script> 

flowplier 공식 홈페이지에서 최신 버전을 다운로드할 수 있습니다: http://flowplayer.org/download/index.html

2.XHTML

플레이어를 추가해야 하는 곳에 다음 코드를 추가하세요.

<a href="flowplayer.flv" style="display:block;width:520px;height:330px" id="player"></a>

a 태그의 href 속성을 재생할 비디오 주소를 지정한 다음 스타일, 너비 및 높이를 설정하고 디스플레이:블록을 설정합니다. 물론 중요한 것은 a 태그에 대한 ID를 지정하는 것입니다. JS가 호출합니다.

물론 html로 DIV를 지정한 다음 Javascript를 사용하여 다음과 같이 재생 주소를 제어할 수도 있습니다.

<div id="player2" style="width:520px; height:330px"> </div>

3. 자바스크립트

플레이어를 호출하려면 페이지 하단에 자바스크립트 스크립트를 포함하세요.

<script type="text/javascript"> 
flowplayer("player", "flowplayer-3.2.7.swf"); 
</script>

flowplayer() 함수를 사용하여 플레이어를 호출합니다. 첫 번째 매개변수는 플레이어의 ID이고 두 번째 매개변수는 플레이어의 경로입니다. .

태그를 사용하여 동영상 파일을 호출하는 대신 DIV를 사용하여 호출하는 경우 코드는 다음과 같습니다.

flowplayer( 
 "player2", 
 "flowplayer-3.2.7.swf",{ 
 clip: { 
 url: "flowplayer.flv", 
 autoPlay: false, 
 autoBuffering: true 
 } 
 } 
); 

flowplayer() 함수의 세 번째 매개변수는 실제로는 고급 설정인 여러 설정에 사용할 수 있습니다. 클립 메소드의 url: 비디오 파일의 실제 주소를 나타냅니다. autoPlay: 자동 재생 여부를 나타냅니다. 기본값은 true입니다. autoBuffering: 자동으로 버퍼링할지 여부, 즉 비디오 파일이 자동으로 재생되지 않도록 설정된 경우입니다. , 플레이어는 여전히 비디오 파일 콘텐츠를 미리 다운로드합니다.

flowplayer는 재생 목록 및 스킨 설정과 같은 다양한 고급 설정도 지원합니다. 관심 있는 학생들은 http://flowplayer.org/documentation/configuration/index.html을 방문하세요.