• 播放视频


    <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();
                }
            }
  • 相关阅读:
    jquery获得option的值和对option进行操作
    laravel 在添加操作自动完成对时间保存修改
    laravel使用ajax
    mysql操作查询结果case when then else end用法举例
    Laravel框架数据库CURD操作、连贯操作总结
    laravel5.1关于lists函数的bug
    详解AngularJS中的filter过滤器用法
    javascript中的时间处理
    angularJs--$on、$emit和$broadcast的使用
    angularJs--<ui-select>
  • 原文地址:https://www.cnblogs.com/yyjh/p/11623115.html
Copyright © 2020-2023  润新知