HLS視頻在chrome上不可見| Video.js

我試圖在我的wordpress網站上使用video.js播放HLS視頻。 我可以聽到音頻，但視頻不可見。任何想法爲什麼如此。HLS視頻在chrome上不可見| 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>

請幫助。

來源

2017-08-28 Fayza Nawaz

我不確定上面的代碼有什麼問題，因爲我沒有足夠的與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存儲桶在美國，因爲用戶在那裏。但是，我從巴基斯坦訪問它。所以問題依然存在。可能是什麼問題？如何解決它？

來源

2017-08-28 18:24:12

HLS視頻在chrome上不可見| Video.js

回答

相關問題