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

回答

相关问题