在chrome上看不到HLS视频|Video.js [英] HLS Video not visible on chrome | Video.js
问题描述
我正在尝试使用video.js在我的wordpress网站上播放HLS视频.我可以听到音频，但看不到视频.知道为什么会这样.
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.
我尝试了其他链接(例如此)，并且视频可见.但是，就我而言，我的视频都看不到.请注意，数据位于S3上，具有公共访问权限.
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.
我的代码是:
<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>
请帮助.
推荐答案
我不确定上面的代码到底有什么问题，因为我没有足够的与Web相关的知识.但是，我发现堆栈溢出的此解决方案，事情开始起作用:
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-->
更新该解决方案有时也不起作用.可能是HLS视频的带宽问题.我的S3存储桶在美国，因为那里有用户.但是，我正在从巴基斯坦访问它.因此问题仍然存在.可能是什么问题?如何解决?
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?
这篇关于在chrome上看不到HLS视频|Video.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
