V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
chocoluffy
V2EX  ›  分享创造

一个创意视频分屏的效果, 自己捣鼓出来了一个山寨版

  •  2
     
  •   chocoluffy ·
    chocoluffy · 2016-04-25 03:35:56 +08:00 · 3022 次点击
    这是一个创建于 3167 天前的主题,其中的信息可能已经有所发展或是发生改变。

    和朋友聊天时无意间发现的一个创意视频分屏的想法, 来自beoplay这个高端耳机的宣传页面, 在自己实现的过程中, 也发现了视频自适应居中的这个设计细节, 自己也捣鼓了出来, 话说在之后产品的宣传主页视频可以一试的, 从两个视角去诠释同一个故事, 就是对这样有心思的设计细节没有任何抵抗力呢。

    beoplay

    以下是博文原链接, 欢迎评论!!!

    http://chocoluffy.com/2016/04/23/%E5%88%9B%E6%84%8F%E8%A7%86%E9%A2%91%E5%88%86%E5%B1%8F-HTML5-JS/

    6 条回复    2016-04-25 09:57:41 +08:00
    ETiV
        1
    ETiV  
       2016-04-25 04:39:59 +08:00
    http://www.mi.com/hezi3s/

    跟中间的 2K - 4K 对比差不多一个意思?
    chocoluffy
        2
    chocoluffy  
    OP
       2016-04-25 06:00:12 +08:00
    @ETiV 哈哈在分屏效果上是类似的, 不过那个对图片的处理就会简单很多啦, 感觉就是在某个位置以左叠加一个高斯模糊的滤镜就可以了~ 相比之下, 对视频的处理还要考虑到视窗和视频本身的移动呢! 不过谢谢分享啦!
    herozzm
        3
    herozzm  
       2016-04-25 07:38:06 +08:00 via Android
    多个声音怎么办
    chocoluffy
        4
    chocoluffy  
    OP
       2016-04-25 08:10:20 +08:00
    @herozzm 我做了音轨的渐变处理, 也就是根据视频的相对大小来相对改变音量, 也就是说, 当某个视频占主体位置的时候, 另一个视频的声音是会渐弱的, 这样可能使用体验更好吧! 在博文最后有 demo 的网址, 你可以试试, 我 host 在了 github pages 上, 对了, 这个 demo 只在桌面端 work , 在手机端还是实现不了这个效果呢, 有点可惜啦, 如果有改进的建议的话, 希望能提出来啦~
    gotounix
        5
    gotounix  
       2016-04-25 09:25:51 +08:00
    快速拉扯的时候边缘缝隙比较大
    chocoluffy
        6
    chocoluffy  
    OP
       2016-04-25 09:57:41 +08:00
    @gotounix 啊对的!我调试的时候也发现是有, 原因也很明显, 我只对整个 container 绑定了 mousemove 事件, 而 html 页面其他元素是不会监听 mousemove 的, 因此当鼠标快速移出 container 的时候, 就会发现边缘缝隙较大了, 我现在就改改 code , 加个 condition , 如果鼠标在 container 之外, 就把视频宽度订死为全屏~谢谢啦!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3356 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 11:30 · PVG 19:30 · LAX 03:30 · JFK 06:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.