{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 劫难 的问题《HLS Video not visible on chrome | Video.js》','https://www.manongdao.com/q-959187.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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:
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?