예
아래 이미지는 사용자가 진행률 표시 줄 위로 마우스를 가져갈 때 표시되는 축소판을 보여줍니다.
아래 샘플 비디오는 Thumbnails Plugin의 사용을 보여줍니다. 비디오 재생을 시작합니다. 그런 다음 진행률 표시 줄 위로 마우스를 이동하고 축소판 이미지를 선택하여 비디오의 해당 섹션으로 이동합니다.
이 항목에는 다음과 같은 섹션이 포함되어 있습니다.
썸네일 이미지 수집
이때 직접 이미지를 수집해야합니다. 미리보기 썸네일은 Zencoder 인코딩 프로세스 . 또한 도구는 다음과 같이 존재합니다. SnapMotion이 프로세스를 자동화합니다.
이미지를 생성하는 방법에 관계없이 사용할 이미지 수를 결정하고 적절한 크기를 선택해야합니다.
소스 코드를 사용하여 구현
썸네일 플러그인을 사용하여 썸네일을 구성 할 수 있습니다. 소스 코드를 사용하여 미리보기 이미지 플러그인을 구현하려면 다음 단계를 따르세요.
- Video Cloud Studio에서미디어기준 치수.
- 사용하려는 비디오를 선택하고게시 및 삽입단추.
- 대화 상자에서 Brightcove 기본 플레이어 또는 구성한 플레이어를 선택합니다.
-
복사많은코드를 삽입하고
id속성video-js꼬리표. 다음과 유사해야합니다.<video-js id="myPlayerID" data-account="1752604059001" data-player="default" data-embed="default" controls="" data-video-id="2026618970001" data-playlist-id="" data-application-id="" width="960" height="540"></video-js> <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script> - HTML 페이지 코드를 사용하여 플레이어 소스 코드를 편집기에 붙여 넣습니다.
- 에서
head페이지 코드 섹션에 다음 CSS 파일을 추가합니다.<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css"> - 에서
body섹션의 플레이어 소스 코드 아래에 다음 JavaScript 파일을 추가합니다.<script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script> -
이전 스크립트 아래에 다음과 같은 스크립트 블록을 추가합니다.
- 준비가되면 플레이어에 대한 참조를 가져옵니다.
-
을 부르다
thumbnails미리보기 썸네일 이미지가있는 플러그인
<script> videojs.getPlayer('myPlayerID').ready(function() { var myPlayer = this; myPlayer.thumbnails(thumb_data); }); var thumb_data = { "0": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png", "width": 120 }, "29": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png" }, "54": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png" }, "84": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png" }, "114": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png" }, "143": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png" } }; </script>이 예제에서는 다음과 같이 타임 라인 위로 마우스를 가져갈 때 축소판 미리보기 이미지를 표시합니다.
- 그만큼 sea-lionfish-thumbnail.png비디오 시작부터 29 초까지 이미지가 표시됩니다.
- 그만큼 sea-anemone-thumbnail.png이미지가 29 초에서 54 초까지 표시됩니다.
- 그만큼 sea-clownfish-thumbnail.png 54 초에서 84 초까지 이미지가 표시됩니다.
. . .
- 그만큼 sea-dolphins-thumbnail.png이미지는 143 초부터 비디오 끝까지 표시됩니다.
플러그인 옵션에 대한 자세한 내용은속성부분.
-
다음은 전체 코드 예제입니다.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Display Thumbnail Previews</title> <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css"> </head> <body> <video-js id="myPlayerID" data-account="1752604059001" data-player="default" data-embed="default" controls="" data-video-id="2026618970001" data-playlist-id="" data-application-id="" width="960" height="540"></video-js> <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script> <!-- Script for thumbnails plugin --> <script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script> <script> videojs.getPlayer('myPlayerID').ready(function() { var myPlayer = this; myPlayer.thumbnails(thumb_data); }); var thumb_data = { "0": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png", "width": 120 }, "29": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png" }, "54": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png" }, "84": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png" }, "114": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png" }, "143": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png" } }; </script> </body> </html>
속성
다음 플러그인 속성은 축소판 이미지를 제어하는 데 사용됩니다.
- 첫 번째 인수 :
- 값은 문자열 또는 숫자 일 수 있으며 개체와 연결됩니다.
- 썸네일 이미지를 표시 할 시간을 초 단위로 정의합니다.
- 최소한, 당신은
0속성src사용자가 진행률 표시 줄의 시작 부분을 가리킬 때의 값입니다. 추가 시간이있는 경우 플러그인은 진행률 표시 줄을 분할하고 사용자가 진행률 표시 줄 위로 마우스를 가져 가면 적절한 이미지를 표시합니다.
- :
src- 값은 문자열이어야합니다.
- 썸네일 이미지의 URL입니다.
- :
width- 이 속성은 첫 번째 축소판 이미지에 포함되어야합니다. 진행률 표시 줄의 시작 또는 끝 근처에있을 때 이미지가 디스플레이 밖으로 미끄러지지 않게합니다.
다음은 진행률 표시 줄에서 세 블록의 시간 동안 축소판 이미지를 설정하는 예입니다.
- 첫 번째 이미지는 사용자가 동영상 시작에서 5 초까지 진행률 표시 줄 위에 마우스를 올려 놓으면 표시됩니다.
- 두 번째 이미지는 5 초에서 10 초까지 표시됩니다.
- 세 번째 이미지는 10 초부터 비디오 종료까지 표시됩니다.
{
"0": {
"src": "http://solutions.brightcove.com/bcls/assets/images/Tiger-4-preview.jpg",
"width": 120
},
"5": {
"src": "http://solutions.brightcove.com/bcls/assets/images/Water-4-preview.jpg"
},
"10": {
"src": "http://solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather-4-preview.jpg"
}
}
CSS 이미지 스프라이트
선택하면 CSS 이미지 스프라이트를 미리보기 썸네일로 사용할 수 있습니다. 다음 JSON은options CSS 이미지 스프라이트를 사용할 때 속성 :
{
0: {
src: 'thumbnails.png',
style: {
left: '-60px',
width: '600px',
height: '68px',
clip: 'rect(0, 120px, 68px, 0)'
}
},
10: {
style: {
left: '-180px',
clip: 'rect(0, 240px, 68px, 120px)'
}
},
20: {
style: {
left: '-300px',
clip: 'rect(0, 360px, 68px, 240px)'
}
},
30: {
style: {
left: '-420px',
clip: 'rect(0, 480px, 68px, 360px)'
}
},
40: {
style: {
left: '-540px',
clip: 'rect(0, 600px, 68px, 480px)'
}
}
변경로그
보고 된 사항 없음