video.js 动态设置答案

【问题标题】：video.js setup dynamicallyvideo.js 动态设置
【发布时间】：2015-11-12 06:05:38
【问题描述】：

我需要使用 javascript（不带标签）来设置带有以下简单代码的 videojs，但 css 似乎没有正确加载，作为 HTML 方式的正确方法是什么？

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <link href="http://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" type="text/css">
  <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
  <script src="http://vjs.zencdn.net/5.0/video.js"></script>
</head>
<body>
  <div id="videoarea"></div>
  <script>
		var container = document.getElementById("videoarea");
		videojs(container, {
			controls: true,
			class:'video-js vjs-default-skin',
			techOrder: ["html5", "flash"],
			source: {
				type : 'rtmp/mp4',
				src : 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
			}
		}, function() {
		});
	</script>
</body>
</html>

【问题讨论】：

标签： html5-video video.js

【解决方案1】：

您必须在页面上包含一个 html5 视频标签。这确保了正确的设备回退，并且是 videojs 正确加载所必需的。

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <link href="http://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" type="text/css">
  <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
  <script src="http://vjs.zencdn.net/5.0/video.js"></script>
</head>
<body>
  <video id="videoarea" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264"> </video>
  <script>
        var container = document.getElementById("videoarea");
        videojs(container, {
            controls: true,
            class:'video-js vjs-default-skin',
            techOrder: ["html5", "flash"],
            source: {
                type : 'rtmp/mp4',
                src : 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
            }
        }, function() {
        });
    </script>
</body>
</html>

【讨论】：

感谢 Broonix！ BTW，你知道videojs是否支持RTMP steam好？地址如下（包含链接保护参数）：rtmp://cdn.mydomain.com/live/58af2b668a374e9ab8704a859df15bce?wsSecret=2fd7daa16f2d59722e501a8381d72776&wsTime=56455cf7
对于'type'参数，我试过'rtmp/mp4'、'rtmp/flv'、'video/mp4'、'video/flv'，都不起作用。跨度>
文档说有。我从来没有用过它TBH：blog.videojs.com/post/60471080014/…
我看到这个帖子，没有给出任何明确的指导。我想也许流的 URL 应该遵循他们的规则。
@Broonix 是否可以拥有多个 source？也许是一系列来源？因为，根据浏览器的不同，您可能需要一个mp4、ogg 和一个webm。