2017-08-28 10 views
0

私はvideo.jsを使って自分のワードプレスサイトでHLSビデオを再生しようとしています。 音声は聞こえますが、ビデオは表示されません。なぜそう思うか。HLSビデオはクロムで表示されません。 Video.js

他のリンク(例:this)を試しましたが、動画が表示されています。しかし、私の場合、私のビデオは見えません。データは公開アクセス権を持つS3にあります。助けてください

<link href="http://vjs.zencdn.net/6.2.5/video-js.css" rel="stylesheet"> 
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> 

<video id=example-video width=960 height=400 class="video-js vjs-default-skin" controls> 
     <source 
     src="https://s3.amazonaws.com/sffs-upload-steve/v1/hls/sffs-2014-short-012/sffs-2014-short-012.m3u8" 
     type="application/x-mpegURL"> 
</video> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> 
<script src="https://unpkg.com/video.js/dist/video.js"></script> 
<script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script> 
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> 


<script> 
    (function(window, videojs) { 
     var player = window.player = videojs('example-video'); 
     var loadUrl = document.getElementById('load-url'); 
     var url = document.getElementById('url'); 
     loadUrl.addEventListener('submit', function(event) { 
     event.preventDefault(); 
     player.src({ 
      src: url.value, 
      type: 'application/x-mpegURL' 
     }); 
     return false; 
     }); 
    }(window, window.videojs)); 
    </script> 

私のコードはようです。

答えて

0

私はWebに関連する知識が十分でないため、上記のコードで実際に何が問題であるかはわかりません。しかし、私は、スタックオーバーフローのthis解決策を見つけたとの事は仕事を始めた:

<!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://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>Video</h1> 

    <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
    data-setup='{}'> 
    <source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='application/x-mpegURL'> 
    </video> 

    <script> 
    var player = videojs('my_video_1'); 
    </script> 

</body> 
</html> 

<!-- Replace current .m3u8 and check..current file has access issue--> 

更新 をこのソリューションはまた時々機能していません。 HLSビデオの帯域幅に問題があるかもしれません。私のS3バケツはユーザーがいるので米国内にあります。しかし、私はパキスタンからアクセスしています。だから問題はそこに残っている。何が問題なの?それを修正するには?

関連する問題