AHMAD
264
2016-05-25 12:11:58
4
3548

video.js 에서 type error 가 발생합니다. 도와주세요..



구글링으로도 도저히 해결방법을 찾을 수 없어 선생님들께 조언 부탁 드립니다..

video.js example 참고하여 공부하던 중, 다음과 같은 에러를 크롬 콘솔창에서 발견하였습니다.


browser console

VIDEOJS: TypeError: this.sourceBuffer.abort is not a function(video.js:24)
video.js:68 Uncaught TypeError: this.sourceBuffer.abort is not a function (video.js:68)


html code


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
<script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>

</head>
<body>
  <h1>m3u8_video</h1>
  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="960" height="540" data-setup='{}'>
    <source src="http://192.168.0.111/live/test/index.m3u8" type='application/x-mpegURL'>
  </video>
  <script> var player = videojs('my_video_1');</script>
</body>
</html>


해당 에러는 비디오 플레이어의 재생 버튼을 눌렀을 때 발생합니다.

특이한건, PC환경의 chrome browser와 Explorer 에서만 발생합니다.

모바일 환경에서의 chrome 과 safari 에서는 잘 동작합니다.

추가 : Mac 에서 safari에서도 잘 작동합니다. Mac의 chrome에서는 에러가 나오고 동작하지 않습니다.


어떤 부분이 문제인지 제 좁은 생각으로는 알수가 없습니다.

선생님들께서 조금만 도와주시면 앞으로 공부하는데 큰 도움이 될 것 같습니다. 

긴 글 읽어주셔서 감사합니다.




0
  • 답변 4

  • siva6
    4k
    2016-05-25 12:34:57

    hls (m3u8) 을 사용하셔서 그런 것 같네요.

    브라우져마다 지원하는 동영상 포맷이 다릅니다.

  • AHMAD
    264
    2016-05-25 13:52:24

    siva6 // mobile 에서도 원활히 작동되야 하기에 일부러 hls(m3u8) 포맷을 사용했습니다. 

    브라우저마다 지원하는 동영상 포맷이 다르다면 mobile chrome에서는 작동하고 PC chrome 에서는 작동을 하지 않는다는게 잘 이해가 안됩니다. 

  • siva6
    4k
    2016-05-25 14:45:22

    왜 지원을 안하냐고 묻는다면 알 수 없습니다.

    OS가 다르다면, 그 위에서 도는 브라우져도 다른 넘이라고 생각하야 합니다.
    특히, 모바일 OS하고는 더 큰차이가 나구요.

    아래 url을 참조해보세요.
    https://www.jwplayer.com/html5/hls/

    만약, flash를 사용한다면 pc에서도 hls 재생이 가능합니다.

  • AHMAD
    264
    2016-05-25 15:58:27

    siva6 // 친절한 답변 감사합니다. chrome browser 가 hls 를 지원하지 않아서 그런 것 이라면 트위치 TV (http://www.twitch.tv) 같은 스트리밍 사이트 에서는 어떻게 chrome browser 를 통해 hls 포맷으로 파일을 전송할까요. 혹시 view port 같은 옵션을 통해 브라우저마다 다른 web player 를 제공하는 것 일까요..

    문득 궁금해서 글 남겨봅니다. 감사합니다.

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