问从json文件中获取视频源和数据的视频播放器。

EN

<link rel="stylesheet" type="text/css" href="style.css">
<div class="container">
<div class="hook">
<video onended="playNext()" width="640" height="480" id="myVideo"     controls autoplay>

    </video>
</div>

<div>
  <ul>
    <li><a id="vid1" href="#"><img src="http://placehold.it/200x100"></a>  </li>
    <li><a id="vid2" href="#"><img src="http://placehold.it/200x100"></a></li>
    <li><a id="vid3" href="#"><img src="http://placehold.it/200x100"></a></li>
  </ul>
</div>
<!-- /.hook -->
</div>
<!-- /.container -->

<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js">  </script>

<script type="text/javascript">

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);
console.log('parsed',parsedData)
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);

//simulate
getAjax(callback);
};


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


//to simulate
function getAjax(callback) {
setTimeout(function () {
    callback(JSON.stringify([{
        "id": "vid1",
            "name": "#",
            "description": "#",
            "content-url": "video1.mp4",
            "thumb-url": "#"
    }, {
        "id": "vid2",
            "name": "#",
            "description": "#",
            "content-url": "video2.mp4",
            "thumb-url": "#"
    }, {
        "id": "vid3",
            "name": "#",
            "description": "#",
            "content-url": "video3.mp4",
            "thumb-url": "#"
    },{
        "id": "vid4",
            "name": "#",
            "description": "#",
            "content-url": "video4.mp4",
            "thumb-url": "#"
    }  ]))
}, 100)
}

loadFunction();

document.getElementById("vid1").addEventListener("click", loadFunction);
document.getElementById("vid2").addEventListener("click", loadFunction);
document.getElementById("vid3").addEventListener("click", loadFunction);

</script>