몽쯔

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

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

여러가지 시도를 해봤다.

1. 절대경로로 올리기

-> 간헐적으로 안됨

2. video.js 플러그인 사용

https://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

팝업이나 비동기 처리 시 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();

1. marzipano

• marzipano Tool을 사용하면 UI를 사용하여 제작가능(매우 간편)
• 한장의 이미지를 잘개 쪼개는 방식이라 소스가 가벼움

www.marzipano.net/

2. pannellum

• pc에서는 확대 모바일에서는 자이로 기능지원
• 이미지용량에 따라 기기호환이 안될 수도 있음

pannellum.org/

swiperjs.com/get-started/

ie 호환버전 : 5.2.0