Question

从列表中获取视频并使用jQuery将其显示在html文件中非常容易。现在我想为每个视频分配一些不同的文字。一种方法是为每个文本写一个通过样式表放置的html文件。但我如何从一个文件中读出我的文本，并为每个视频/图像分配行？

文本文件：

这里有一些文字到视频1 视频2的其他一些文字 ...

$(function() {
  $("#playlist li").on("click", function() {
    $("#videoarea").attr({
      "src": $(this).attr("movieurl"),
      "autoplay": "autoplay"
    });
  });

  $("#videoarea").attr({
    "src": $("#playlist li").eq(0).attr("movieurl")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="videoarea" controls="controls" poster="" src=""></video>
<ul id="playlist">
  <li movieurl="jembe_3.ogv" >Video 1</li>
  <li movieurl="jembe_4.ogv" >Video 2</li>
  <li movieurl="jembe_5.ogv" >Video 3</li>
  <li movieurl="jembe_6.ogv" >Video 4</li>
</ul>

Answer 1

您可以使用数据属性：

<body>
<video id="videoarea" controls="controls" poster="" src=""></video>
<div id="text"></div>
<ul id="playlist">
    <li movieurl="jembe_3.ogv" data-text="text 1">Video 1</li>
    <li movieurl="jembe_4.ogv" data-text="text 2">Video 2</li>
    <li movieurl="jembe_5.ogv" data-text="text 3">Video 3</li>
    <li movieurl="jembe_6.ogv"  data-text="text 4">Video 4</li>
</ul>

<script src="jquery.min.js">; </script>
<script> 
    $(function() {
    $("#playlist li").on("click", function() {
    $("#text").html($(this).data("text"));
    $("#videoarea").attr({
        "src": $(this).attr("movieurl"),
        "autoplay": "autoplay"
    })
})

$("#videoarea").attr({
     "src": $("#playlist li").eq(0).attr("movieurl")
}) 

})
</script> 
</body>

如果您想添加复杂的字幕，请执行以下操作：

<body>
<video id="videoarea" controls="controls" poster="" src=""></video>
<div id="text"></div>
<ul id="playlist">
    <li movieurl="jembe_3.ogv">
        Video 1
        <div class="caption">
            text 1 <br/>
            <b>text 2</b>
        </div>
    </li>
    <li movieurl="jembe_4.ogv">
        Video 2
        <div class="caption">
            text 1 <br/>
            <b>text 2</b>
        </div>
    </li>
    <li movieurl="jembe_5.ogv">
        Video 3
        <div class="caption">
            text 1 <br/>
            <b>text 2</b>
        </div>
    </li>
    <li movieurl="jembe_6.ogv">
        Video 4
        <div class="caption">
            text 1 <br/>
            <b>text 2</b>
        </div>
    </li>
</ul>

<script src="jquery.min.js">; </script>
<script> 
    $(function() {
    $("#playlist li").on("click", function() {
    $("#text").html($(this).children(".caption").html());
    $("#videoarea").attr({
        "src": $(this).attr("movieurl"),
        "autoplay": "autoplay"
    })
})

$("#videoarea").attr({
     "src": $("#playlist li").eq(0).attr("movieurl")
}) 

})
</script> 
</body>

请考虑在css文件中使用以下规则：

#playlist .caption{display:none}

Answer 2

相关部分，

<ul id="playlist">
    <li movieurl="jembe_3.ogv" videotext="here some text to video1">Video 1</li>
    <li movieurl="jembe_4.ogv" videotext="some other text to video2">Video 2</li>
</ul>


$("#playlist li").on("click", function() {
  $("#videoarea").attr({
      "src": $(this).attr("movieurl"),
      "autoplay": "autoplay"
  })
  $("#videotext").text($(this).attr("videotext"));
})


$("#videoarea").attr({
     "src": $("#playlist li").eq(0).attr("movieurl")
})
$("#videotext").text($("$playlist li").eq(0).attr("videotext"));

作为最佳做法，您可能希望使用data-movieurl和data-movietext。

编辑，将文本保存在单独的文件中：

<ul id="playlist">
    <li movieurl="jembe_3.ogv" fileurl="file1.html">Video 1</li>
    <li movieurl="jembe_4.ogv" fileurl="file2.html">Video 2</li>
</ul>

$("#playlist li").on("click", function() {
  $("#videoarea").attr({
      "src": $(this).attr("movieurl"),
      "autoplay": "autoplay"
  })
  $("#videotext").load($(this).attr("fileurl"));
})

Answer 3

您可以以json格式存储您的信息，如何加载此信息是另一个我不打算讨论的完全不同的主题。

您将拥有一个包含以下内容的JSON文件：

{
  "movie_data": [
    {
      "id":"movie1",
      "title":"some movie"
    },
    {
      "id":"movie2",
      "title":"some other movie"
    }
  ]
}

您可以使用JSON.parse将上述内容检索到Object中，并使用类似的数据属性方法，您可以使用id内的每个对象中的movie-data值来将其与数据属性相匹配。

<ul>
    <li movieurl="jembe_3.ogv" data-movie-text="movie1">Video 1</li>
    <li movieurl="jembe_4.ogv" data-movie-text="movie2">Video 2</li>
</ul>

像这样：http://jsfiddle.net/ecsyfj4y/

jQuery将文本分配给视频或图像

3 个答案: