Javascript HLS视频在chrome | Video.js上不可见
我正在尝试使用video.js在我的wordpress网站上播放HLS视频我可以听到音频,但视频不可见。你知道为什么吗 我尝试了其他链接(例如),视频是可见的。但是,在我的例子中,我的视频都不可见。请注意,数据位于S3上,具有公共访问权限 我的代码如下:Javascript HLS视频在chrome | Video.js上不可见,javascript,wordpress,google-chrome,video.js,Javascript,Wordpress,Google Chrome,Video.js,我正在尝试使用video.js在我的wordpress网站上播放HLS视频我可以听到音频,但视频不可见。你知道为什么吗 我尝试了其他链接(例如),视频是可见的。但是,在我的例子中,我的视频都不可见。请注意,数据位于S3上,具有公共访问权限 我的代码如下: <link href="http://vjs.zencdn.net/6.2.5/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/ie8/1.
<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>
(功能(窗口、videojs){
var player=window.player=videojs('example-video');
var loadUrl=document.getElementById('load-url');
var url=document.getElementById('url');
loadUrl.addEventListener('submit',函数(事件){
event.preventDefault();
player.src({
src:url.value,
类型:“应用程序/x-mpegURL”
});
返回false;
});
}(window,window.videojs));
请帮助。我不确定上面的代码到底是什么问题,因为我没有足够的web相关知识。但是,我找到了堆栈溢出的解决方案,事情开始起作用:
<!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-->
视频
视频
var player=videojs(“我的视频1”);
更新
这种解决方案有时也不起作用。可能是HLS视频的带宽问题。我的S3存储桶在美国,因为用户在那里。然而,我正在巴基斯坦访问它。因此,问题仍然存在。问题是什么?如何修复它