使用json数据更改视频标签中的src属性

Changing src attribute in video tag with json data

本文关键字：src 属性 标签 视频 json 数据 使用      更新时间：2023-09-26

我正在尝试用HTML和JavaScript制作一个视频播放器，它将播放一系列视频，一个接一个，直到所有6个视频都播放完毕。视频的URL存储在一个数组中，并映射到一个名为clips.json.的.json文件中

文件中的数据如下：

    [
{
    "id":"ashklasd132asddfgdf",
    "name": "War on Drugs continues",
    "description":"Losses continue in agressive raid on local property",
    "content-url": "http://buffalogrove.sat.iit.edu/Kitty.mp4",
    "thumb-url":"http://buffalogrove.sat.iit.edu/thumb/dogs_friends-t2.jpg"
},
{
    "id":"asdasd132asddf667jf",
    "name": "Parlimentary Proceedings",
    "description":"World Leaders meet to determine the latest policies on climate change relief",
    "content-url": "http://buffalogrove.sat.iit.edu/Clouds%2038%20Timelapse.mp4",
    "thumb-url":"http://buffalogrove.sat.iit.edu/thumb/colorful_clouds-t2.jpg"
},
{
    "id":"123dfg6132asddfgdz",
    "name": "Weather for March 22nd 2015",
    "description":"Join Jeremy Brown for today's weather",
    "content-url": "http://buffalogrove.sat.iit.edu/Clouds-Time_lapse_22.mp4",
    "thumb-url":"http://buffalogrove.sat.iit.edu/thumb/hidden_lagoon-t2.jpg"
},
{
    "id":"pzxc87asdkjl44h7h",
    "name": "Taking a walk on the wide-side",
    "description":"Cook Counties latest conservation efforts led to a new discovery",
    "content-url": "http://buffalogrove.sat.iit.edu/Flower_4.mp4",
    "thumb-url":"http://buffalogrove.sat.iit.edu/thumb/nature_scenes_3-t2.jpg"
},
{
    "id":"mkiaasdsjdh7asd8889",
    "name": "Musical Stunner",
    "description":"Local musician proves nay-sayers wrong by providing ample range",
    "content-url": "http://buffalogrove.sat.iit.edu/Piano_keys.mp4",
    "thumb-url":"http://buffalogrove.sat.iit.edu/thumb/turkey_karadeniz_region-t2.jpg"
},
{
    "id":"zklsjdpoiqwehbhfyvfy6h",
    "name": "H-Diddy Represent",
    "description":"The newest Album from H-Diddy",
    "content-url": "http://buffalogrove.sat.iit.edu/Pigeon.mp4",
    "thumb-url":"http://buffalogrove.sat.iit.edu/thumb/nanxiang_ancient_town_shanghai_china-t2.jpg"
},
]

URL中的视频完成后，我在更改src属性时遇到问题。视频播放完第一个视频后，它会停止，不会继续播放到第二个视频。我不知道是因为我在AJAX get请求中调用了错误的JSON数据还是其他原因，但如果有人能帮我解决这个问题，我将不胜感激。

我的嵌入JavaScript的HTML代码如下：

    <!DOCTYPE html>
    <html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>IIT News</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.starter-template {
    padding: 40px 15px;
      text-align: center;
   }
</style>
<script type="text/javascript" src="/myJS.js" language="javascript">   </script>
</head>
 <body onload="loadFunction()">
<div class="container">
  <div class="hook">
    <video  onended="playNext()" width="640" height="480" id="myVideo" controls autoplay>
        <!--<source src="parsedData[0].['content-url'][conUrlCount]" type="video/mp4"></source>-->
        <source src="http://buffalogrove.sat.iit.edu/Kitty.mp4" type="video/mp4"></source>
    </video>
  </div><!-- /.hook -->
</div><!-- /.container-->

</body>
</html>

myJS.js低于

        var conUrlCount = 0;
        var myVideo = document.getElementById("myVideo");
        //parsedData should be declared outside the function scope since we want it to be accessible from outside
        var parsedData;
        var callback = function (text) {
            //parsedData = JSON.stringify(JSON.parse(text));
            parsedData = JSON.parse(text);
            conUrlCount = 0;
            //after load play the first video
            playNext();
        };
        //when page is loaded, data in json file is parsed and returned
        function loadFunction() {
            //returning json data
            ajax.get("clips.json", callback);
        };

        function playNext() {
            if (!parsedData) {
                return
            }
            var myVideo = document.getElementById("myVideo");
            myVideo.src = parsedData[conUrlCount]['content-url'];
            myVideo.play();
            conUrlCount++;
        };

一个问题是json对象是回调方法的局部变量，使其成为全局的一个

<video  onended="playNext()" width="640" height="480" id="myVideo" controls

自动播放>

然后

var conUrlCount = 0;
var myVideo = document.getElementById("myVideo");
//parsedData should be declared outside the function scope since we want it to be accessible from outside
var parsedData;
var callback = function (text) {
    parsedData = JSON.parse(text);
    conUrlCount = 0;
    //after load play the first video
    playNext();
};
//when page is loaded, data in json file is parsed and returned
function loadFunction() {
    //returning json data
    ajax.get("clips.json", callback);
};

function playNext() {
    if (!parsedData) {
        return
    }
    var myVideo = document.getElementById("myVideo");
    myVideo.src = parsedData[conUrlCount]['content-url'];
    myVideo.play();
    conUrlCount++;
}

演示：Fiddle

相关文章：