video封装ui

所属分类:媒体-音频和视频

 12975  37  查看评论 (15)
video封装ui ie兼容10
shineOnVideoPlay("myVideo","scroll","scrollson","scrollsonbg"),

函数内部均为id或者相关的样式表,自行查看源文件


相关插件-音频和视频

video封装ui

videoui无任何依赖,代码注释很清楚。
  音频和视频
 12975  37

html5云特效背景音乐网站模板

html5动态特效背景,带播放器
  音频和视频
 9090  151

js音频可视化插件Wavesurfer.js

Wavesurfer.js是一个javascript库用于创建交互式可操作音频可视化,使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波
  音频和视频
 1105  15

蓝色音乐播放器

网页上的一款网页上的一款音乐播放器!
  音频和视频
 10620  91

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币

    柚子0
    2016/12/17 9:12:12
    信思游0
    2016/12/15 16:12:24
    放大是可以了,但是放大之后缩小就是坑了 回复
    ┽陌路,归客ぅ0
    2016/9/21 17:09:04
    全屏有bug,控件位置不对。用的谷歌、火狐。 回复
    相思、凌晨0
    2016/8/23 16:08:18
    非常不错的。受用了
        梅雪瑶香0
        2016/8/23 16:08:39
        谢谢,更多插件可关注https://github.com/ylws
    回复
    25375273200
    2016/8/16 11:08:40
    支持移动端吗
        梅雪瑶香1
        2016/8/16 11:08:24
        没有做touch事件,想支持的话,可以把click和监听对应的替换一下就好了
    回复
    丢失??记忆0
    2016/8/11 16:08:20
    更符合规范和地方 回复
    Gor0
    2016/8/2 0:08:48
    看看是什么好东西~ 回复
        R0
    2016/7/28 18:07:12
    点击空白的地方进度会前进,全屏的时候显示有问题
        梅雪瑶香1
        2016/7/29 9:07:15

        感谢这位网友提出的bug,已做更正;请替换下面的函数: 

        window.onresize = function(e) {
            //判断当前状态是否全屏 f11	
            var screenwid = screen.width,
            screenhei = screen.height;
            var docwid = document.documentElement.clientWidth;
            var dochei = document.documentElement.clientHeight;
            if (screenwid == docwid && screenhei == dochei) {
                document.getElementById(id).parentNode.style.width = screen.width + "px";
                document.getElementById(id).parentNode.style.height = screen.height + "px";
                intwid(id);
                parentobj.getElementsByClassName("fullscreen")[0].setAttribute("fs", "true");
            } else {
                document.getElementById(id).parentNode.style.width = document.getElementById(id).parentNode.getAttribute("originwid");
                document.getElementById(id).parentNode.style.height = document.getElementById(id).parentNode.getAttribute("originhei");
                parentobj.getElementsByClassName("fullscreen")[0].setAttribute("fs", "false");
            }
            parentobj.children[0].style.width = "100%";
            parentobj.children[0].style.height = "100%";//初始化长度 
        }
        function intwid(id) {
            var obj = document.getElementById(id).parentNode;
            obj.setAttribute("originhei", getStyle(obj, "height")) obj.setAttribute("originwid", getStyle(obj, "width")) var fahterwid = obj.clientWidth;
            var playwid = obj.getElementsByClassName("play")[0].clientWidth;
            var fullscreenwid = obj.getElementsByClassName("fullscreen")[0].clientWidth;
            var voicewid = obj.getElementsByClassName("volum")[0].clientWidth;
            var timewid = obj.getElementsByClassName("totaltime")[0].clientWidth;
            var lesswidth = fahterwid - playwid - fullscreenwid - voicewid - timewid;
            obj.getElementsByClassName("timeline")[0].style.width = lesswidth - 30 + "px";
        }
            R0
        2016/7/29 11:07:12
        全屏的时候显示还是会有问题,视屏虽然放大了,但是控件还是在原来的位置没有变。~
        梅雪瑶香0
        2016/7/31 16:07:00
        你用的那个浏览器?本地测试,chrome,firefox没有问题的
        梅雪瑶香1
        2016/7/31 16:07:15
        obj.setAttribute("originhei", getStyle(obj, "height")) ;obj.setAttribute("originwid", getStyle(obj, "width")); var fahterwid = obj.clientWidth;init方法里面这句话请添加分号
            R0
        2016/8/1 11:08:14
        用的chrome,但是没有本地测试,直接 打开的。
    回复
取消回复
    PROMULGATOR

    梅雪瑶香

    火星