아미나빌더 1.7.25를 사용하고있는데 플레이어 수정하고 싶은데요
본문
https://ygosu.com/board/stars/176976
보통 이런 짤게시판은
동영상 비율에 맞춰 리사이즈 되어 자동재생됩니다.
아미나에서는 jw플레이어로고와 함께
동영상 리사이즈 기능이 없고 버튼을 눌러야 플레이가 됩니다.
https://ygosu.com/board/stars/176976
이런 식의 게시판 형식으로 커스텀을 하고 싶은데
어떻게 해야할까요?
답변 5
https://docs.jwplayer.com/players/reference/javascript-player-api-introduction
https://docs.jwplayer.com/players/reference/setup-options
jwplayer 의 API 문서에 명시되어 있는 다음 속성들을 지정해 주었음에도
autostart
mute
repeat
Firefox 제외 나머지 브라우저는 기대하는대로 동작하지 않는것 같습니다.
재생이 안되는 이유는 다음 메세지에서 찾아볼수 있고
Unmuting failed and the element was paused instead because the user didn't interact with the document before.
mute 속성이 jwplayer 에서 생성한 video 엘리먼트에 제대로 전달이 안되는것 같습니다.
그래도 제공하는 option 들 이기 때문에 먼저 지정 후 추가속성 적용, 플레이 되도록 진행하는 코드입니다.
<script type="text/javascript" src="https://www.msgdamoa.com/plugin/jwplayer/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="";</script>
<div id="sqefhmrlgkinojtudp">Loading the player...</div>
<div class="h15"></div>
<div id="hqvlufpgtkmrniosjwx">Loading the player...</div>
<div class="h15"></div>
<div id="ohcdmgpjirfbesukqlnt">Loading the player...</div>
<div class="h15"></div>
<div id="ixoypvlnsfqwuemcdjhztkrg">Loading the player...</div>
<div class="h15"></div>
<div id="tfpgvkirhseoljqmun">Loading the player...</div>
<div class="h15"></div>
<div id="vmwpugotjinqsrkflh">Loading the player...</div>
<div class="h15"></div>
<script>
function alternativePlay(instance) {
if (/Firefox/.test(navigator.userAgent) == true) {
return;
}
setTimeout(function () {
var vdo = document.querySelector('#' + instance.id + ' video');
if (vdo != null) {
vdo.loop = true;
vdo.muted = true;
vdo.autoplay = true;
}
instance.play();
}, 1);
}
jwplayer("sqefhmrlgkinojtudp").setup({
file: "https://www.msgdamoa.com/data/file/co_001/2084294038_xVhaEAbe_759632e4e86048318e13b5cf88273e0edbad2e8d.mp4",
title: "msgzoa_8_0.mp4",
// aspectratio: "16:9",
// width: "100%"
aspectratio: "9:16",
width: "50%",
autostart: true,
mute: true,
repeat: true,
}).onMeta(function (meta) {
alternativePlay(this);
});
jwplayer("hqvlufpgtkmrniosjwx").setup({
file: "https://www.msgdamoa.com/data/file/co_001/2084294038_Ige9OH3F_f7c9f6aaf55b55c3bc56b87903a227ea5915dae3.mp4",
title: "msgzoa_8_1.mp4",
// aspectratio: "16:9",
// width: "100%"
aspectratio: "9:16",
width: "50%",
autostart: true,
mute: true,
repeat: true
}).onMeta(function (meta) {
alternativePlay(this);
});
jwplayer("ohcdmgpjirfbesukqlnt").setup({
file: "https://www.msgdamoa.com/data/file/co_001/2084294038_qAh7TnmZ_9160b68fda40a9c2e9f40da5633331555dd344bb.mp4",
title: "msgzoa_8_2.mp4",
// aspectratio: "16:9",
// width: "100%"
aspectratio: "9:16",
width: "50%",
autostart: true,
mute: true,
repeat: true
}).onMeta(function (meta) {
alternativePlay(this);
});
jwplayer("ixoypvlnsfqwuemcdjhztkrg").setup({
file: "https://www.msgdamoa.com/data/file/co_001/2084294038_P5zNx6w8_461082b1fd1075ba5989fbf2ab15d541dd2fe0f1.mp4",
title: "msgzoa_8_3.mp4",
// aspectratio: "16:9",
// width: "100%"
aspectratio: "9:16",
width: "50%",
autostart: true,
mute: true,
repeat: true
}).onMeta(function (meta) {
alternativePlay(this);
});
jwplayer("tfpgvkirhseoljqmun").setup({
file: "https://www.msgdamoa.com/data/file/co_001/2084294038_ThMNJSGn_f0ff1e4d80292488ee371647fea6ba9f7ccedaca.mp4",
title: "msgzoa_8_4.mp4",
// aspectratio: "16:9",
// width: "100%"
aspectratio: "9:16",
width: "50%",
autostart: true,
mute: true,
repeat: true
}).onMeta(function (meta) {
alternativePlay(this);
});
jwplayer("vmwpugotjinqsrkflh").setup({
file: "https://www.msgdamoa.com/data/file/co_001/2084294038_bpsv1z7m_e468d684e6a557769b36fc8377543cbd9b502da5.mp4",
title: "msgzoa_8_5.mp4",
// aspectratio: "16:9",
// width: "100%"
aspectratio: "9:16",
width: "50%",
autostart: true,
mute: true,
repeat: true
}).onMeta(function (meta) {
alternativePlay(this);
});
</script>
view.skin.php 가장 하단부에...
<script>
mp4Div = document.querySelector('.view-content');
mp4List = [];
for (i = 1; i < mp4Div.innerHTML.split('file: "').length; i++) mp4List.push(mp4Div.innerHTML.split('file: "')[i].split('"')[0]);
mp4Div.innerHTML = "";
for (j of mp4List) mp4Div.innerHTML += "<video src='" + j + "' style='display:block;max-width:100%;margin:0 auto;;margin-top:20px' autoplay loop muted></video>";
</script>
현재 홈페이지 주소를 올려주시겠어요?
답변을 작성하시기 전에 로그인 해주세요.