HLS Video not visible on chrome | Video.js

I'm trying to play HLS videos on my wordpress site using video.js. I can hear the audio, but video is not visible. Any idea why so.

I tried other links (e.g.this), and video is visible. However, in my case, none of my videos is visible. Please note, data is on S3, with public access rights.

My code is as:

<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>

Please help.

I'm not sure what really is the issue with the code above, as i don't have enough knowledge related to web. However, i found this solution on stack overflow and things started working:

<!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-->

Update This solution is also not working sometimes. May be it's issue with bandwidth of HLS videos. My S3 bucket is in US as the users are there. However, i'm accessing it from Pakistan. So the question remains there. What can be the issue? How to fix it?