0
142

JSP 에서 모바일 영상재생 이슈에 대해서 글올립니다 ㅜㅜ .. (IOS 이슈)


서버에서 컨텐츠 카드를 받아오고, (컨텐츠카드안에 비디오 파일도 들어있습니다 ..!) 

그 값들을 배열에 안에 넣어 준뒤에 append 를 사용하여 리스트를 뿌려주는 구조에 프로젝트입니다 .. ! 

            '<video id="my-player_'+i+'" muted="muted" preload="auto" playsinline autoplay >' +

            '<source src="' +

            '/upload/' +

            urlArray[i] +

            '"type="video/mp4"/>' +

            '</video>' +


아래 부분 처럼 비디오를 뿌려주는데 웹에서나 개발자 도구를 사용해서 모바일뷰에서나 확인해보면 비디오리스트들이 정상적으로 실행이  되는데 IOS 환경 모바일에서는 첫번째 영상만 나오고 두번째영상부터는 나오지가 않더라구요 .. 혹시 원인이 무엇일까요 ..? 의심되는 부분은 해당영상이 끝나면 다음영상으로 자동으로 넘겨서 실행시켜주는 아래에 구문인데 .play()와 .pause()가 문제가 될까요 ..? 



      mySwiper.on('transitionEnd', function () {

        //console.log('now index :::', mySwiper.realIndex);

        var index = mySwiper.activeIndex;

        var currentSlide = $(mySwiper.slides[index]);

        var currentPlayer = currentSlide.find('video');

        var currentBar = currentSlide.find('span');

        var totSlider = mySwiper.slides.length;

        // currentBar[0].css("width", 0);

        for (var i = 0; i < totSlider; i++) {

          if (i == index) {

            currentPlayer[0].currentTime = 0;

            currentPlayer[0].play();


          } else {

            var otherSlide = $(mySwiper.slides[i]);

            var otherPlayer = otherSlide.find('video');

            var prevText = '#custom-seekbar' + (index - 1) + ' span:nth-child(1)';

            var nextText = '#custom-seekbar' + (index + 1) + ' span:nth-child(1)';

            $(prevText).css("width", 0 + "%");

            $(nextText).css("width", 0 + "%");

            otherPlayer[0].currentTime = 0;

            otherPlayer[0].pause();


          }

        }

        //player.currentTime(0)

        //player.pla();

      });

0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.