jQuery를 사용하여 FlowPlayer를 사용하여 영화를 포함합니다

이 안내서는 오픈 소스 플로우 플레이어를 사용하여 영화를 포함시키는 방법을 보여줍니다. 이 최소 설정으로 시작됩니다. 향후 게시물은 iPad 지원, 사용자 정의 컨트롤 및 라이브 스트리밍과 같은 고급 사용자 정의를 다룰 것입니다.

html

jQuery

자주 묻는 질문 (faqs) :

<div id="fms"></div>
<div id="video-stream-status"><span class="status">Status Ready.</span></div>

<🎜 🎜> <<> 설치 :

공식 웹 사이트에서 FlowPlayer 스크립트 및 CSS 파일을 다운로드하여 HTML에 포함시킵니다. 대상 요소 ID 및 구성 옵션을 지정하여 <🎜 🎜> 함수를 사용하여 FlowPlayer 초기화.

//video or stream address
var streamAddressFull = "http://streamaddress/mp4:filename/playlist.m3u8",
    vidElem = $('#fms'),
    statusElem = $('#video-stream-status .status');

$f('fms', "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
    debug: true, //output all events to the console for debugging

    onError: function(e) {
        statusElem.html("Error: (code:" + e + ").");
    },

    version: [9, 115], //minimum Flash version required

    onFail: function() {
        statusElem.html("Update Flash for MP4 playback. Your version: " + this.getVersion());
    },

    onBeforeLoad: function() {
        statusElem.html("Loading...");
    },

    clip: {
        url: streamAddressFull,
        scaling: 'fit', //fit, scale, orig, half
        autoPlay: true,
        autoBuffering: true,
        onStart: function(clip) {
            statusElem.html("Playing.");
        }
    },

    plugins: {
        controls: {
            right: 0,
            bottom: 0,
            opacity: 0.95,
            backgroundGradient: 'low',
        }
    },

    canvas: {
        backgroundGradient: 'none',
        backgroundColor: '#000000'
    }
});

jQuery 호환성 : 예, FlowPlayer는 jQuery와 완벽하게 작동하여 고급 제어 및 상호 작용을 허용합니다.

사용자 정의 :

크기, 색상 및 동작을 수정하기 위해 CSS와 구성 옵션을 사용하여 FlowPlayer의 모양을 사용자 정의합니다.

• 비디오 소스 : FlowPlayer는 서버, CDN 및 비디오 호스팅 서비스를 포함한 다양한 비디오 소스를 지원합니다. 초기화 중에 비디오 URL을 제공합니다 $f() 재생 제어 : FlowPlayer의 JavaScript API를 사용하여 프로그래밍 방식으로 재생을 제어합니다 (재생, 일시 정지, 중지, Seek, Volume). 이벤트 리스너는 재생 상태에 대한 피드백을 제공합니다

브라우저 호환성 :
• FlowPlayer는 HTML5 비디오를 사용하는 최신 브라우저와 호환됩니다. 이전 브라우저는 플래시 플러그인이 필요할 수 있습니다 (코드 예제에 표시된대로).

  모바일 지원 : FlowPlayer는 반응이 좋으며 터치 컨트롤이있는 모바일 장치에서 작동합니다.

다중 인스턴스 :
• 단일 페이지에 여러 유량 플레이어 인스턴스를 포함시킬 수 있습니다. 각각 고유 한 ID가 필요합니다

  라이브 스트리밍 : FlowPlayer는 라이브 스트림을 지원합니다. 초기화 중에 스트림 URL을 제공하십시오

문제 해결 :
• 오류 메시지는 브라우저의 JavaScript 콘솔을 확인하십시오. 도움을 받으려면 FlowPlayer 문서 및 커뮤니티 포럼을 참조하십시오

위 내용은 jQuery를 사용하여 FlowPlayer를 사용하여 영화를 포함합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!