播放视频

<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();
            }
        }
原文地址:https://www.cnblogs.com/yyjh/p/11623115.html