zoukankan      html  css  js  c++  java
  • 播放视频

    <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();
                }
            }
  • 相关阅读:
    netcore---Program.cs配置相关信息,及读取配置信息
    js
    python3 openssl问题(贼有用)
    Flask+微信公众号开发(接入指南)
    运维角度处理跨域问题
    羞羞的Python模块包
    Nginx之伪404( root与alias )
    【深度学习】:梯度下降,随机梯度下降(SGD),和mini-batch梯度下降
    【深度学习】:小白也能看懂的卷积神经网络
    《剑指offer》5:替换空格
  • 原文地址:https://www.cnblogs.com/yyjh/p/11623115.html
Copyright © 2011-2022 走看看