<div id="video-box"> <div id="ctrl"> <div title="上一个" id="prev"></div> <div title="下一个" id="next"></div> </div> <video onclick="mp4Click()" id="like" width="400" height="500" autoplay="autoplay"> <source src="video/1.MP4" type="video/mp4"> </video> </div>
li{ list-style: none; } div{ margin: 50px 50px 50px 50px; } #prev{ background-color: yellowgreen; } #next{ background-color: orange; } #prev,#next{ width: 40px; height: 40px; border: 1px; border-radius: 20px; margin: 10px 10px 10px 10px; padding: 0px 0px 0px 0px; } #ctrl{ float: left; } #video-box{ margin: 50px 50px 50px 50px; padding: 0px 0px 0px 0px; /*border: 1px solid yellowgreen;*/ }
$(function () { var index = 1;//index 1 - 63 。当前index 1 var Total = 63;//当前共63个MP4 常量 不改变它 改变它就没意义了 $('#prev').click(function () { index = index - 1; if (index == 0) { index = Total; } $('#like').remove(); var html = "<video onclick='mp4Click()' id="like" width="400" height="500" autoplay="autoplay"> " + " <source src="video/" + index + ".MP4" type="video/mp4"> " + " </video>"; $('#video-box').append(html); /* 对于这种添加的代码,要绑定事件必须写普通js函数,不可以页面加载时绑定事件,因为页面加载时可能 还没有这条代码*/ }); $('#next').click(function () { index = index + 1; if (index > Total) { index = 1; } $('#like').remove(); var html = "<video onclick='mp4Click()' id="like" width="400" height="500" autoplay="autoplay"> " + " <source src="video/" + index + ".MP4" type="video/mp4"> " + " </video>"; $('#video-box').append(html); }); }); //点击视频时 function mp4Click() { var elementById = document.getElementById('like'); if (elementById.paused) { elementById.play(); } else { elementById.pause(); } }