Javascript 使用jquery创建videojs

我试图使用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>

cam1@g20 

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

HTML

JS

$（文档）.ready（函数（）{
变量流=[
“cam1”，
“cam2”，
“cam1”，
“cam2”，
“cam1”，
“cam2”，
“cam1”，
“cam2”，
“cam1”，
“cam2”，
“cam1”，
“cam2”
];
var videoStreams=函数（）{
对于（变量i=0；i“确保在DOM包含所有视频框后初始化VideoJS。
在上一个示例代码中，您应该为VideoJS容器使用video元素，而不是div元素。video 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>')

$（'#cam_streams'）。追加(
''+流+''）
我找到了一种以json格式实现videojs的方法，而不是在找到后用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",

  }]
});

var包装器=$（''）；
wrapper.addClass（'box'）；
var视频=$（''）；
addClass（“video js vjs默认皮肤vjs大播放中心”）；
video.attr（'id'，'box-'+流）；
附加到（包装器）；
变量注释=$（''+流+''）；
annotation.addClass（'grid-overlay-bottom-right'）；
appendTo（包装器）；
appendTo（'cam#u streams'）；
videojs（“框-”+流{
techOrder:['flash'，'html5']，
自动播放：错误，
宽度：640，
身高：480，
控制：对，
资料来源：[{
src:'http://myurl.com/livehttp/“+stream+”.stream/playlist.m3u8'，
输入：“视频/mp4”，
}]
});

我已经在Chrome和Safari上进行了测试，效果很好。
非常感谢，它现在可以在Chrome和Safari上使用。我一定是在某个时候更改了视频标签，但没有意识到。
$('#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>')

  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",

  }]
});