video.js setup dynamically

问题

I need to use javascript (with no tag) to setup videojs with below simple codes, but the css seems not loaded correctly, what's the right way for this as the HTML way is ?

<!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>

回答1:

You have to include an html5 video tag on the page. This ensures proper device fallback and is required for videojs to properly load.

<!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>

来源：https://stackoverflow.com/questions/33665340/video-js-setup-dynamically

标签

html5-video

video.js