Question

我试图制作一个带有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"
},
]

我在完成网址视频后更改src属性时遇到问题。视频播放第一个视频后，它会停止播放，并且不会播放到第二个视频。我不知道是不是因为我用我的AJAX get请求或其他东西调用了JSON数据错误，但是如果有人可以帮我解决这个问题，我会非常感激它

我的嵌入式JavaScript代码如下：

    <!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++;
        };

Answer 1

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

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

自动播放＆GT;

然后

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

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

1 个答案: