video.js 动态设置

Question

我需要使用 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>

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

video.js 动态设置

video.js setup dynamically

html5-video

video.js