论坛 › 【中画十四周年】——世间始终你好 › 【中画网十四周年庆】为梦想努力（孙子体训）

巫荣云师 发表于 2021-11-30 15:31

【中画网十四周年庆】为梦想努力（孙子体训）

<style type="text/css">
        #playframe        {
                width:1000px;height:auto !imprtant;
                margin:100px auto 32px -180px;
                position:relative;
                background:gray url(http://www.hitow.net/data/attachment/album/201603/29/130457ouulphaq9pnpqiu7.jpg) 0 0 / cover;
                overflow:hidden;
                border:12px brown ridge;
                border-radius:12px;
                min-height:320px;
                font-size:16px;
                font-weight:bold;
        }
</style>

<div id="playframe" style="">

</div>

<script type="text/javascript">
        var videoArray = [        //        歌曲视频参数组
                ["http://url.amp3a.com/youku.php/XNTE0NzMwMzAyOA==.mp4", "练跑"],

                ["http://url.amp3a.com/youku.php/XNTE0Nzc0NjgyOA==.mp4", "练跳远"],

                ["http://url.amp3a.com/youku.php/XNTE0NzMwMzAyNA==.mp4", "练举重"],

                ["http://url.amp3a.com/youku.php/XNTE0NzMwMzAyMA==.mp4", " 练臂力"],

                ["http://url.amp3a.com/youku.php/XNTE0Nzc0NjgxNg==.mp4", " 练球1"],

                ["http://url.amp3a.com/youku.php/XNTE0NzMwMzAzNg==.mp4", " 练球2"],
               
                ["http://url.amp3a.com/youku.php/XNTE0Nzc0NjgyMA==.mp4", " 练球3"],

        ];
        var        opts =        {
                videoParas:videoArray,
                frameID:"playframe"
        };
       
        function playMP4(opts)        {
                var        dFrame = document.getElementById(opts.frameID);
                //        建一个 Video
                var player = document.createElement('video');
                player.style.width = "100%";
                player.controls = true;
                player.autoplay = true;
                dFrame.appendChild(player);
               
                // 建一个菜单列表
                var divObj = document.createElement('div');
                divObj.style.width = '400px';
                divObj.style.height = '200px';
                divObj.style.position = 'absolute';
                divObj.style.left = '30px';
                divObj.style.top = '20px';
                divObj.style.overflowY = 'auto';
                divObj.style.overflowX = 'hidden';
                divObj.style.visibility = 'hidden';
                divObj.style.scrollbarWidth = 'thin';
               
                var olObj = document.createElement('ol');
                olObj.style.width = '100%';
                olObj.height = '100%';
                olObj.style.color = 'blue';
                olObj.style.cursor = 'pointer';
               
               
                //        初始化菜单项
                var items = new Array();
                for(k = 0 ; k < opts.videoParas.length; k++)        {
                        oli = document.createElement('li');
                        oTxt = document.createTextNode(opts.videoParas);
                        oli.appendChild(oTxt);
                        olObj.appendChild(oli);
                        items = oli;
                }
               
                divObj.appendChild(olObj);
                dFrame.appendChild(divObj);
                //
                dFrame.addEventListener('touchstart',function(){
                        divObj.style.visibility = 'visible';
                });
                dFrame.onmouseover = function()        {
                        divObj.style.visibility = 'visible';
                }
               
                dFrame.addEventListener('gesturechange',function(){
                        divObj.style.visibility = 'hidden';
                });
               
                dFrame.onmouseout = function()        {
                        divObj.style.visibility = 'hidden';
                }
                               
                //        一曲播放完的事件处理
                player.onended = function()        {
                        items.style.color = 'blue';
                        player.pause();
                        curIdx++;
                        if(curIdx >= items.length) curIdx = 0;
                        player.src = opts.videoParas;
                        items.style.color = 'red';
                        player.play();
                }
                //        每个菜单项添加点击事件处理
                for(n = 0; n < items.length; n++)        {
                        items.onclick = function()        {
                                player.pause();
                                items.style.color = 'blue';
                                for(j = 0; j < items.length; j++)        {
                                        if(this.innerHTML == opts.videoParas)        {
                                                player.src = opts.videoParas;
                                                this.style.color = 'red';
                                                curIdx = j;
                                                break;
                                        }
                                }
                                player.play();
                        }
                }

                // 初始化播放参数
                var curIdx = 0;
                player.focus();
                player.src = opts.videoParas;
                items.style.color = 'red';
               
        }

        playMP4(opts);
</script>

香染 发表于 2021-11-30 19:10

最好的时候祝愿前程似锦

巫荣云师 发表于 2021-11-30 19:28

香染 发表于 2021-11-30 19:10
最好的时候祝愿前程似锦
问好香染老师，谢谢点评鼓励！

蓝魔 发表于 2021-11-30 23:16

欣赏一下，谢谢。

诺北 发表于 2021-12-1 08:44

这特效眼前一亮啊

诺北 发表于 2021-12-1 08:44

云师好久不见啊，祝福你孙子前程似锦

巫荣云师 发表于 2021-12-1 13:41

诺北 发表于 2021-12-1 08:44
这特效眼前一亮啊

问好诺北老师，谢谢点评鼓励！

巫荣云师 发表于 2021-12-1 13:48

诺北 发表于 2021-12-1 08:44
云师好久不见啊，祝福你孙子前程似锦

诺北管理员老师您太忙了，我还是天天来中画网，看得多，发帖少。谢谢您的祝福与点评鼓励！

清野 发表于 2021-12-1 14:12

恭喜老先生

清野 发表于 2021-12-1 14:12

跟帖同贺中画十四周年

查看完整版本: 【中画网十四周年庆】为梦想努力（孙子体训）