Статьи

페이지에 비디오 삽입 : 자바 스크립트와 플래시 사용

  1. 게시자
  2. x64 (일명 andi)

얼마 전에 html5에서 특별히 구현 된 비디오 태그에 대해 언급했습니다

얼마 전에 html5에서 특별히 구현 된 비디오 태그에 대해 언급했습니다. 그러나 유감스럽게도 태그를 사용하면 이익보다 불편 함이 더 커집니다. 따라서 하나의 비디오 형식으로 완전히 할 수있는 방법에 대해 알려 드리겠습니다.

한 프로젝트에서 사이트에서 동영상을 푸는 가능성을 찾아야했습니다. 처음부터 플레이어를 처음부터 만들 수는 없었습니다. (처음에는 개발 환경이 없기 때문에 제공하지 않았습니다.) 사실 플래시 플레이어의 얼굴에 적합한 후보를 찾아야했습니다. 덕분에 YouTube 사용자 덕분에 이런 종류의 플레이어를 탐색하기가 매우 쉽기 때문에 특별히 복잡한 작업은 필요하지 않았습니다.)

flv-mp3.com 사이트에있는 2 명의 후보자 (uppod'a의 프로젝트) 및 흐름 선수 . 각자 작은 멍청이를 만들었습니다. 첫 번째 것은 현재 api를 제공하는 조합에 찬성하여 신속하게 포기되었습니다. 시간이 나타 났을 때, 내부의 내장은 나를 실망시키지 못했습니다 (어떤 사람들은 vtyuhat flv-mp3.com에 들어갈 수있었습니다).

알다시피, 첫인상은 오히려 사기성이 있으며, 특히 포화 상태가 가장 낮은 기기 (주로 모국어를 사용하는 경우)에 선호도가 부여되는 경우가 있습니다. flv-mp3에서 요구되는 것은이 접근 방식입니다.이 서비스는 지정된 특성을 가진 플레이어를 "조립"할 수있는 기회를 제공합니다 ( 양식 화면 보호기, 치수 및 기타 매개 변수)를 표시하고 출력 코드를 가져 와서 파일을 삽입하십시오. 예, 옵션은 매우 편리 할 것입니다. 특히 js 등을 포함 해 html을 강한 마녀로 생각하는 사람들에게 특히 좋습니다.

사이트에 정기적으로 동영상을 추가하는 것만으로도 플레이어를 끊임없이 "구성"하는 열의에 기여할 가능성은 거의 없습니다. 또는 모든 설정을 탐색하고 서버 언어를 통해 자동화 할 수 있습니다. 이 원리는 왜곡 된 것일뿐입니다 (YouTube에 비디오를로드하고 다운로드 할 준비가 된 코드를 얻는 것이 훨씬 쉽습니다).

여기에서 우리는 이미 완전히 마법사라고 불릴 수있는 바로 그 일에옵니다. 신은 자바 스크립트 마술을 이해하고 싶습니까? 나는 그것이 전혀 어렵지 않다는 것을 보여줄 것이다 (심지어 생성자를 사용하는 것보다 쉽다). 이 플로우 플레이어를 도와주세요. 당신은 버전을 선택할 수있다. 여기에서 하지만 GPL3에 따라 배포되는 첫 번째 버전은 사이트에 매우 적합합니다.

플레이어는 flv, mp4, m4v (이미지 - jpg, gif, png) 콘텐츠 재생을 지원합니다. 비디오는 버전 9부터 지원되므로 지원 문제가 없어야합니다.

플레이어와 보관 파일을 다운로드하고 압축을 풉니 다. flowplayer.controls-NumVer.swf , flowplayer-NumVer.swfexample / flowplayer-NumVer.min.js같이 3 개의 파일을 사이트에 업로드해야합니다. NumVer 는 버전 번호이며, 3.2.7과 같습니다 .

첫 번째 파일에는 제어판이 있고 두 번째 파일에는 플레이어가 직접 연결되어 있으며 세 번째 파일에는 API를 제공하는 링크가 있습니다. 처음 두 파일 (* .swf)은 같은 폴더에 있어야합니다. 이제는 가장 간단한 코드를위한 시간입니다. 그것이 될 수 있습니다 :

<script type = "text / javascript"src = "/ src / player / flowplayer-3.2.6.min.js <div id ="player "style ="width : 640px; height : 480px; "> </ div> "> </ script> <script type ="text / javascript "> flowplayer ( 'player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

플레이어 ID가있는 div 요소는 동영상을 푸는 컨테이너입니다. 두 번째 줄에는 자바 스크립트 파일 연결이 있습니다. 직접 출력은 3 개의 매개 변수를 전달하는 하나의 함수 flowplayer ()를 담당합니다.

  1. 비디오가 재생되어야하는 요소의 ID.
  2. 플레이어에 대한 경로 (즉, 자동으로로드되는 컨트롤이 아닌 플레이어에 대한 경로).
  3. 몇 가지 추가 매개 변수.

그건 그렇고, 식별자 이외에 직접 개체 또는 선택기에 대한 참조를 전달할 수 있습니다.

위의 코드는 아무 것도 표시하지 않지만 flowplayer를 페이지에 연결하는 것이 얼마나 쉬운지를 알 수 있습니다. 비디오를 출력하려면 세 번째 매개 변수를 만들어야하며 이는 간단합니다.

단순화를 위해 : 세 번째 매개 변수 (config)는 다음 요소를 설명 할 수있는 연관 배열입니다.

  • 클립 -이 키를 사용하면 자동으로 버퍼링 (autoBuffering) 또는 재생 (autoPlay)을 시작할지 여부, 내용의 크기를 조절하는 방법 (fit 값으로 비율을 조정하면 원래 종횡비가 유지되며 일반 비디오의 경우에는 " 아마 그것만). 재생중인 파일 (URL)을 지정할 수도 있고 일시 중지 이벤트 (예 : 영화 재생이 시작될 때 호출되는 기능)를 지정할 수도 있습니다.
  • 재생 목록 은 일반 배열 (목록)입니다. 각 요소는 문자열 (이 경우 문자열은 재생되는 클립의 주소 임) 또는 연관 배열 일 수 있습니다. 두 번째 경우 데이터 세트는 이전 항목의 클립 키와 비슷한 데이터 세트로 볼 수 있습니다. 즉, 버퍼링, 재생 시작 등을 지정할 수 있습니다.
  • 플러그인 - 표준 기능을 확장합니다. 기능 중 하나는 바로 현장에서 인터페이스를 올바르게 작동시키는 것입니다.

이제 가능한 예를 들어 보겠습니다.

<script id = "player"style = "width : 520px; height : 330px;"> </ div> <script type = "text / javascript"src = "/ src / player / flowplayer-3.2.6.min.js flowplayer ( 'player', '/src/player/flowplayer-3.2.7.swf', {clip : {autoPlay : false, autoBuffering : false, scaling "> <script type ="text / javascript " : 'fit'}, 재생 목록 : [{url : 'https : //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering : true, autoPlay : true}, 'http : // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // 플러그인을 조작하려면 controls : {controls : {url :'flowplayer.controls-3.2.16.swf ', playlist : false , // 되감기 버튼을 제거합니다. stop : true, // 중지 버튼을 추가합니다. scrubber : true // false는 비디오의 스크롤을 비활성화합니다.}}}); </ script>

표시된 코드는 자동 시작 재생을 사용하지 않도록 설정, 자동 버퍼링을 사용하지 않도록 설정, 창에 맞게 비디오 크기를 조정하는 등 전역 설정으로 설정합니다. 재생할 수있는 파일로 사진과 비디오가 사용되며 사진의 설정이 덮어 쓰기됩니다 (자동으로 불러 와야하기 때문에). 그림 (또는 재생 단추)을 클릭하면 비디오가 표시됩니다. 보시다시피 모든 것이 매우 간단합니다. 다른 비디오 클립을 추가하려면 쉼표로 구분하여 새 항목을 재생 목록에 추가하기 만하면됩니다. 재생 목록의 자동 재생이 필요한 경우 연관 배열 클립 에서 autoPlay 값이 true로 설정됩니다.

API 함수를 포함하는 문서가 있습니다. 여기에 . 누군가 영어를 이해하지 못한다면 - 중요하지 않습니다. 모든 것이 분명합니다. 그리고 위 코드를 분석 한 결과, 부두에 무엇이 있는지 이해하는 것이 가능합니다. 나는 수요가있을 "세팅"이있을 것이라는 점을 확실히 들여다 볼 것을 적극 권장한다.

예제는 할 수있다. 여기 봐. . 소스 코드 (Ctrl + U)를 보는 것을 잊지 마세요.

게시자

오프라인 1 주

x64 (일명 andi)

의견 : 2842 간행물 : 395 등록 : 02-04-2009

?신은 자바 스크립트 마술을 이해하고 싶습니까?
2011.11.19
Карта