video封装ui

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

 14959  47  查看评论 (17)
video封装ui ie兼容10

更新时间:2017/3/14 上午10:06:05

更新说明:

  1. 插件进行了全新的封装;

  2. 各个方法不在散落在整个页面;

  3. 调用更加清晰简洁

shineOnVideoPlay("myVideo","scroll","scrollson","scrollsonbg"),

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


相关插件-音频和视频

时间播放器

类似视频播放器下面的时间播放控制
  音频和视频
 9004  20

annyang!语音识别

annyang是一个很小的JavaScript库,可以让你的访客用语音命令来控制你的网站。
  音频和视频
 9383  47

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

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

video封装ui

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

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

    *信@守& 0
    2017/3/13 17:36:31

    可以一个页面多个视频不?

        梅雪瑶香0
        2017/3/14 10:05:09
        插件已重构,由于不可以重复提交,请查看https://github.com/ylws/videoui.git,更多插件,请关注https://github.com/ylws!
    回复
    柚子 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
    回复
    2537527320 0
    2016/8/16 11:08:40
    支持移动端吗
        梅雪瑶香1
        2016/8/16 11:08:24
        没有做touch事件,想支持的话,可以把click和监听对应的替换一下就好了
    回复
    丢失??记忆 0
    2016/8/11 16:08:20
    更符合规范和地方 回复
    Gor 0
    2016/8/2 0:08:48
    看看是什么好东西~ 回复
        R 0
    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,但是没有本地测试,直接 打开的。
    回复
取消回复