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>

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>