아미나빌더 1.7.25를 사용하고있는데 플레이어 수정하고 싶은데요

아미나빌더 1.7.25를 사용하고있는데 플레이어 수정하고 싶은데요

QA

아미나빌더 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>

신비님 이 코드가 되긴 되나요?
웹상에 떠 있는 걸 보고 바로 파싱을 했는데 실제로 아미나에선 안해 봤어요.ㅋ
지금보니 마진 제로 오토 끝에 세미콜론 두개 들어간 부분 하나는 삭제해야겠네요. 결과는 같지만... 오타 들어갔네요.ㅜㅠ

https://ygosu.com/board/stars/176976

여기에서 쓰인 플레이어는 이름이 뭔지 알수 있을까요?

답변을 작성하시기 전에 로그인 해주세요.
전체 301
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT