Java Script : 반응 형 JW 플레이어 만들기 : 예제, 구현

Java Script : 반응 형 JW 플레이어 만들기 : 예제, 구현

 

웹 사이트에서 타사 응용 프로그램 JWplayer를 사용하여 비디오를 표시하는 방법과 이러한 비디오를 반응형으로 만드는 방법을 쉽게 보여주는 코드를 보여줍니다. JWPlayer는 비디오를 보고있는 브라우저에 따라 플래시 또는 HTML5 비디오를 자동으로 전환하는 비디오 플레이어입니다. 즉, HTML5 비디오와 함께 제공되는 모든 브라우저 지원 문제를 처리합니다.

HTML5 비디오는 IE8 이하를 제외한 모든 브라우저에서 제대로 작동합니다. JWPlayer는 사용중인 브라우저 버전을 확인하고 HTML5 또는 Flash를 사용하여 비디오를 재생합니다. 또한 JWPlayer를 사용하면 플레이어를 자신의 이미지로 사용자 정의 할 수 있으므로 웹 사이트에 맞게 쉽게 브랜딩 할 수 있습니다. 사이트에 YouTube 비디오를 삽입하는 것보다 훨씬 전문적인 것처럼 보입니다.

 

기능은 다음과 같습니다.

• 프리 롤 광고
• 포스트 롤 광고
• Google 웹 로그 분석
• 비디오 퍼블리싱
• 라이브 스트리밍
• 디스플레이 캡션
• 여러 스킨
• 재생 조회수 추적
• 비디오 드롭 오프 추적

사이트에서 JWPlayer를 사용하려면 JWP에서 구입할 수 있습니다. 

Pricing | JW Player

 

 

사이트에 JWPlayer 추가

웹 사이트에 JWPlayer를 추가하려면 재생할 비디오를 전달하는 페이지와 비디오의 너비와 높이에 JavaScript를 추가해야합니다.

 

jwplayer("myElement").setup({ file: "/uploads/myVideo.mp4", width: "640", height: "360" });

 

비디오가 페이지에 추가 될 때 너비가 640px 인 style=""속성을 추가하므로 너비가 640px보다 작은 장치에서 이 비디오를 보면 비디오가 페이지에서 나옵니다.

JWPlayer 6.3의 응답 성 지원이 도입되었으므로 이제 비디오에 너비를 100 % 배치하여 비디오가 장치 너비에 맞도록 할 수 있습니다.

그러나 비디오가 항상 고정 높이를 가진 장치의 100 %로 설정되는 경우 장치의 비디오에 맞게 축소되거나 늘어날 수 있습니다. 반응형 비디오에 대한이 지원으로 JWPlayer에는 이제 비디오의 종횡비를 설정하는 새로운 속성이 포함됩니다.

 

 

<div id="myElement"></div>

<script>
    jwplayer("myElement").setup({
      file: "/uploads/myVideo.mp4",
      image: "/uploads/myPoster.jpg",
      width: "100%",
      aspectratio: "16:9"
    });
</script>

 

이렇게하면 비디오가 장치에 맞도록 강타되거나 늘어나지 않으며 16 : 9 종횡비로 유지됩니다.