我正在使用 Video.js播放器从我的本地网络摄像头流式传输实时内容(但我想在那种情况下应该无关紧要，它可以是来自网络的任何实时流)。我写了一个非常简单的代码:
<head>
<link href="video-js.css" rel="stylesheet">
<script src="http://www.andy-howard.com/js/libs/jquery-1.8.2.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
</style>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls"
preload="auto" data-setup='{}' autoplay="true" >
<source src="http://10.172.180.31:8090/live.flv" type="video/x-flv">
</video>
</body>
现在在那个配置中我看到了流内容，但是有几个错误:
1) 我没有看到控件(暂停流)
2) 流看起来像 this , 因此视频不会调整为组件的完整大小。但是(这真的很有趣)当我将网页上的元素(例如在 Chrome 中按住控件并滚动鼠标滚轮)调整为 110% 时，视频会填满整个组件。似乎是 video.js 中的错误，或者我的实现有误？
3) 当我删除参数 autoplay="true" 时- 什么都没有显示，控件和视频都消失了，无法播放。
4) 我想删除 autoplay="true" , 但通过包含 poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" 添加海报信息- 什么都没有改变，流不可见，控件不存在。
5) 当我删除 data-setup 时参数并像这样保留它:
<video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls"
preload="auto" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" >然后可以看到控件和海报(这太棒了!)，但是播放按钮是灰色的，无法播放我的流。
我想要达到的效果是，在加载网页后我可以看到带有播放按钮的海报图像，当我点击它时 - 我会看到适当调整大小的流。我错过了什么？ 谢谢!
最佳答案
试试不用控件
这对我有用:
<video id="se_videojs" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" height="auto" width="auto" data-setup="{}">
<source src="http://server/playlist.m3u8" type="application/x-mpegurl">
</video>
关于javascript - 带有实时流媒体的 Video.js 仅在自动播放设置为 true 时显示。单击播放按钮后我可以让它工作吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30287236/