一个创意视频分屏的效果， 自己捣鼓出来了一个山寨版
chocoluffy · chocoluffy · 2016-04-25 03:35:56 +08:00 · 3000 次点击这是一个创建于 3136 天前的主题，其中的信息可能已经有所发展或是发生改变。
和朋友聊天时无意间发现的一个创意视频分屏的想法， 来自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/
 |
1
ETiV 2016-04-25 04:39:59 +08:00
|
 |
2
chocoluffy OP @ETiV 哈哈在分屏效果上是类似的， 不过那个对图片的处理就会简单很多啦， 感觉就是在某个位置以左叠加一个高斯模糊的滤镜就可以了~ 相比之下， 对视频的处理还要考虑到视窗和视频本身的移动呢! 不过谢谢分享啦!
|
 |
3
herozzm 2016-04-25 07:38:06 +08:00 via Android
多个声音怎么办
|
|
4
chocoluffy OP @herozzm 我做了音轨的渐变处理， 也就是根据视频的相对大小来相对改变音量， 也就是说， 当某个视频占主体位置的时候， 另一个视频的声音是会渐弱的， 这样可能使用体验更好吧! 在博文最后有 demo 的网址， 你可以试试， 我 host 在了 github pages 上， 对了， 这个 demo 只在桌面端 work ， 在手机端还是实现不了这个效果呢， 有点可惜啦， 如果有改进的建议的话， 希望能提出来啦~
|
 |
5
gotounix 2016-04-25 09:25:51 +08:00
快速拉扯的时候边缘缝隙比较大
|
|
6
chocoluffy OP @gotounix 啊对的！我调试的时候也发现是有， 原因也很明显， 我只对整个 container 绑定了 mousemove 事件， 而 html 页面其他元素是不会监听 mousemove 的， 因此当鼠标快速移出 container 的时候， 就会发现边缘缝隙较大了， 我现在就改改 code ， 加个 condition ， 如果鼠标在 container 之外， 就把视频宽度订死为全屏~谢谢啦!
|
Select Language