Question

我正在尝试使用video.js在我的wordpress网站上播放HLS视频。 我可以听到音频，但视频不可见。不知道为什么会这样。

我尝试了其他链接（例如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>

请帮忙。

Answer 1

我不确定上面的代码究竟是什么问题，因为我没有足够的与网络相关的知识。但是，我发现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存储桶位于美国，因为用户在那里。但是，我从巴基斯坦访问它。所以问题仍然存在。可能是什么问题？如何解决？

HLS视频在chrome |上不可见的Video.js

1 个答案: