Question

我正在尝试使用Jquery创建多个videojs元素，但我无法播放视频。我有一个使用videojs在页面上运行的12个实时流，当我在页面上的每个单独的流中硬编码时，我将它们全部工作

<div class="box">
  <video id="cam1@g20" class="video-js vjs-default-skin vjs-big-play-centered"
    data-setup='{"autoplay": true, "controls": false, "width": 640, "height": 480, "techOrder": ["flash", "html5"]}'>
    <source src="http://myurl.com/livehttp/cam1@g20.stream/playlist.m3u8" type='video/mp4' />
  </video>
    <span class="grid-overlay-bottom-right"> cam1@g20 </span>
</div>

我现在尝试通过使用js和jquery创建div和视频来添加每个视频。

HTML

<body>
 <main class="container" role="main">
   <div id="cam_streams">

   </div>
 </main>
</body>

JS

$( document ).ready(function() {
 var streams = [
  "cam1",
  "cam2",
  "cam1",
  "cam2",
  "cam1",
  "cam2",
  "cam1",
  "cam2",
  "cam1",
  "cam2",
  "cam1",
  "cam2"
  ];
 var videoStreams = function(){
   for (var i = 0; i < streams.length; i++) {
      var stream = streams[i];

   $('.cam_streams').append(
   '<div class="box"><video id="'+stream+'" class="video-js vjs-default-skin vjs-big-play-centered data-setup= "autoplay": true, "controls": false, "width": 640, "height": 480, "techOrder": ["flash", "html5"]></video><source src="http://myurl.com/livehttp/' + stream + '.stream/playlist.m3u8"/><span class="grid-overlay-bottom-right">' + stream + '</span></div>');

    };
};
videoStreams();

当我运行页面时，它正在创建所有12个“盒子”div，并且每个div都有正确的视频，就像我将其硬编码到html文件中一样但它没有播放任何内容而我没有控制台中的错误。

任何有关更好地处理jquery的方法的帮助也会非常感激，我还是很新的。感谢

Answer 1

在上一个示例代码中，您应该使用视频元素而不是videojs容器的div元素。视频js将重新使用此元素用于HTML5视频，并将其包装在div中。

$('#cam_streams').append(
    '<div class="box"><video id="box-' + stream + '" class="video-js vjs-default-skin"></video><span class="grid-overlay-bottom-right">' + stream + '</span></div>')

Answer 2

我找到了一种以json格式实现videojs的方法，而不是在找到this之后通过使用Jquery创建视频标签来尝试添加它我还学到了更多jquery并改进了它。

  var wrapper = $('<div/>');
  wrapper.addClass('box');

  var video = $('<video></video>');
  video.addClass("video-js vjs-default-skin vjs-big-play-centered ");
  video.attr('id', 'box-' + stream);
  video.appendTo(wrapper);

  var annotation = $('<span>' + stream + '</span>');
  annotation.addClass('grid-overlay-bottom-right');
  annotation.appendTo(wrapper);

  wrapper.appendTo('#cam_streams');

videojs("box-" + stream, {
  techOrder: ['flash', 'html5'],
  autoplay: false,
  width: 640,
  height: 480,
  controls: true,
  sources: [{
    src:'http://myurl.com/livehttp/' + stream + '.stream/playlist.m3u8',
    type: "video/mp4",

  }]
});

我已经在Chrome和Safari上对此进行了测试，但它运行正常。

Answer 3

确保在DOM包含所有视频框后初始化VideoJS。

使用jquery创建videojs

HTML

JS

3 个答案: