라이브러리

[videoJS] 사파리(safari) 비디오 재생안되는 오류

몽쯔 2021. 5. 31. 14:26

비디오마다 무슨 차이인지모르게 다빈도 사파리에서 재생이 안되는 경우가 발생한다.

피시에서 되도 모바일에서 안되는 경우도 발생.....

 

여러가지 시도를 해봤다.

1. 절대경로로 올리기

-> 간헐적으로 안됨

 

2. video.js 플러그인 사용

 

https://videojs.com/

 

Video.js - Make your player yours

Make your player yours with the internet's most popular open source video player framework

videojs.com

 

상대경로로 적을 시 

the media could not be loaded, either because the server or network failed or because the format is not supported.

라고 오류발생함.

 

서버에 동영상올리고 주소를 절대경로 바꿨더니 된다.

var playerPc = videojs("myVideo_pc", {
    sources: [{
        src: "http://경로/resources/video/main_pc.mp4",
        type: "video/mp4"
    }],
    controls: false,
    autoplay: true,
    playsinline: true,
    muted: true,
    loop: true,
    preload: "metadata",
});
var playerMob = videojs("myVideo_mob", {
    sources: [{
        src: "http://경로/resources/video/main_mob.mp4",
        type: "video/mp4"
    }],
    controls: false,
    autoplay: true,
    playsinline: true,
    muted: true,
    loop: true,
    preload: "metadata",
});

videoJS 기타 사용법

 

videoJS 여러가지 테마들

css 연결해서 video태그에 class 추가해서 사용하면 된다.

https://github.com/videojs/themes

 

videojs/themes

Videojs themes 💅. Contribute to videojs/themes development by creating an account on GitHub.

github.com

 

팝업이나 비동기 처리 시 portfolio.js:217 VIDEOJS: WARN: Player "video-390" is already initialised. Options will not be applied. 에러가 난다.

기존 로드된 플레이어가 있어서 그런것으로 팝업닫기버튼을 누르거나 탭을 누를때 플러그인을 삭제 후 재 로드 시켜주면 된다.

// 삭제 코드
var myVideo = $(".video-js").attr("id");
            videojs(myVideo).dispose();