Question

我想使用J Query在HTML上显示视频，所有视频应该具有相同的高度和宽度，我不能使用for循环，我有这样的数据集

function appendReturnedVideos(data) {
    var $html = $();

    $.each(data.videos, function(index, element) {
        $html = $html.add($("<video/>", {
            height: 400,
            //width: 200, // uncomment this if you need to set width as well
            css: {
                'max-width': 400
            },
            src: element
        }));
        $("#images").append($html);    
    });
}

appendReturnedVideos({
    "videos": [
        "https:\/\/outpan-images.s3.amazonaws.com\/lo0e22j0nj-0078915030900.mp4",
        "https:\/\/outpan-images.s3.amazonaws.com\/nkvaonl839-0078915030900.mp4",
        "https:\/\/outpan-images.s3.amazonaws.com\/pjkhqlbgwl-0078915030900.mp4"
    ]
});

HTML部分：

<div id="videos"></div>

Answer 1

看看这个。

＆＃13;

var videos=[

    "https:\/\/outpan-images.s3.amazonaws.com\/lo0e22j0nj-0078915030900.mp4",

    "https:\/\/outpan-images.s3.amazonaws.com\/nkvaonl839-0078915030900.mp4",

    "https:\/\/outpan-images.s3.amazonaws.com\/pjkhqlbgwl-0078915030900.mp4"

];

var items="";
for(var i=0;i<=videos.length;i++){
  items+="<video src="+videos[i]+" style='max-width:400' />";
  }
$("#videos").append(items);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="videos"> </div>

＆＃13;

Answer 2

视频不是空白！只是他们没有被播放，因此显示为空白（因为没有设置poster）。如果您设置了controls: true，则您至少拥有播放按钮和其他控件以与视频互动。请查看下面的演示并调整代码以满足您的需求。

＆＃13;

function appendReturnedVideos(data) {
    var $html = $();

    $.each(data.videos, function(index, element) {
        $html = $html.add($("<video/>", {
            height: 360,
            css: { 'max-width': 480 },
            src: element,
            controls: true,
            autoplay: true, // comment if you don't want video being auto played
            preload: 'auto' // comment if you don't want to preload the videos
        }));
    });
    $("#videos").append($html);
}

appendReturnedVideos({
    "videos": [
        "https:\/\/outpan-images.s3.amazonaws.com\/lo0e22j0nj-0078915030900.mp4",
        "https:\/\/outpan-images.s3.amazonaws.com\/nkvaonl839-0078915030900.mp4",
        "https:\/\/outpan-images.s3.amazonaws.com\/pjkhqlbgwl-0078915030900.mp4"
    ]
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="videos"></div>

＆＃13;

如何使用jQuery从JSON显示多个视频

2 个答案: