周杰伦读心术背后的技术实现

前言

  在技术细节的内容开始之前,您可以先通过下方的二维码再次体验这个魔术。

image.png
image.png

一、HTML

1.设置meta

<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

2.配置CSS

  添加了video标签,可能会出现video标签默认置顶的情况,通过以下的样式设置可以解决这个问题。

<style>
    .compatibleStyle {
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
        -moz-backface-visibility:hidden; 	/* Firefox */
        -ms-backface-visibility:hidden; 	/* Internet Explorer */
        -webkit-perspective: 0;
        -webkit-transform: translate3d(0,0,0);
        visibility:visible;
    }
    body{margin:0 auto;background:#000;}
</style>

二、屏幕自适应组件

1.引入JS

<script src="//ossweb-img.qq.com/images/js/mmdPlugin/mmd-plugin.min.1.0.2.js"></script>

组件作者:lennylin

2.初始化

<div view-mode="v" view-rotation="auto" view-scale="noborder" view-width="750" view-height="1332" view-align="">
    <div style="position: absolute;">
        <video id="canvasVideo" style="position:absolute; display:none;"></video>
        <canvas id="canvas" width="750px" height="1332px" style="position:absolute"></canvas>
    </div>
</div>

3.横竖屏配置

3.1.view-mode

  自适应组件的view-mode属性定义了H5是以横屏显示还是以竖屏显示。属性值为“v”表示竖屏,为“h”表示横屏。本项目使用“v”。

3.2.view-rotation

  自适应组件的view-rotation属性定义了移动设备旋转后H5画面是否可见。属性值为“v”表示仅竖屏时可见,为“h”表示仅横屏时可见,为“auto”则表示横竖屏均可以看到画面。本项目使用“auto”。

4.屏幕缩放方式

  自适应组件的view-scale属性定义了屏幕的缩放方式,目前一共有以下6种缩放方式。

参数值

缩放方式

exactfit

宽度等于屏幕宽度,高度等于屏幕高度,会改变原始宽高比

noborder

裁剪宽高后铺满屏幕,不改变原始宽高比

noscale

不进行任何缩放,不改变原始宽高比

showall

整体进行等比例缩放后在屏幕中显示全部内容,不改变原始宽高比

width

仅让宽度等于屏幕宽度,高度会等比例缩放,不改变原始宽高比

height

仅让高度等于屏幕高度,宽度会等比例缩放,不改变原始宽高比

4.1.宽高比例

  以上6种缩放方式中,仅exactfit方式会改变原始画布的宽高比,其他方式都是以等比例进行整体缩放的。

4.2.画布可能铺不满整个屏幕

  exactfit和noborder这两种缩放方式始终都能让画面铺满整个屏幕,不过代价就是画布可能会被裁剪掉一部分边界。而showall、width、height这三种缩放方式在进行屏幕自适应之后可能会使得画布的尺寸小于屏幕尺寸,此时会导致画布铺不满整个屏幕的情况发生。

三、视频组件

1.引入JS

<script src="//ossweb-img.qq.com/images/js/mmdVideoPlayer/mmd.videoplayer.min.1.0.2.js"></script>

组件作者:quanchen

  本文仅从项目使用角度出发讲解那些用到的视频组件的功能,关于视频组件更详尽的内容可以查阅以下文章:

移动端视频H5前端解决方案

2.初始化

var mp4Video = new MMD.VideoPlayer(
{
    videoElement:document.getElementById("canvasVideo"),//[必填],video元素
    src:"视频URL地址",//[必填],video src
    loop:false,//[可选],是否循环,默认false,true为循环
    muted:false,//[可选],是否静音,默认false,IOS下只有IOS10生效,安卓生效
    poster:"",//[可选],video默认图片
    timesParam: [],//[可选],video currenttime时间点
    onTimes:function(name)
    {   
    },//[可选],video currenttime回调
    onStart:function()
    {
    },//[可选],video第一个画面出现回调
    onEnd:function()
    {         
    }//[可选],video播放完成回调
});mp4Video.play();//播放视频

3.切换视频

3.1.更换视频源

  通过视频组件的src属性可以很方便地更换视频源。

3.2.视频提示点

  如果想要在视频播放到某个位置时触发某个动作以便可以进行其他的逻辑处理,可以通过给视频组件的timesParam属性传递一个数组,并通过onTimes回调来实现此功能。

mp4Video.timesParam = [{name:"testName", time:15.5}];

  以上代码的含义是:在视频播放到第15.5秒时发出一个带有name属性值的回调,视频组件的onTimes可以接收并处理这个回调。以下是包含有两个视频提示点的用法,想要配置更多视频提示点的使用方法可以依此类推。

var mp4Video = new MMD.VideoPlayer(
{
    videoElement:document.getElementById("canvasVideo"),//[必填],video元素
    src:"视频URL地址",//[必填],video src
    loop:false,//[可选],是否循环,默认false,true为循环
    muted:false,//[可选],是否静音,默认false,IOS下只有IOS10生效,安卓生效
    poster:"",//[可选],video默认图片
    timesParam: [{name:"testNameA", time:15.5}, {name:"testNameB", time:19}],//两个视频提示点
    onTimes:function(name)
    {
        switch(name)
        {
            case "testNameA"://第1个视频提示点
                //播放到了第15.5秒
                break;

            case "testNameB"://第2个视频提示点
                //播放到了第19秒
                break;
        }         
    },//[可选],video currenttime回调
    onStart:function()
    {
    },//[可选],video第一个画面出现回调
    onEnd:function()
    {         
    }//[可选],video播放完成回调
});

  特别提醒:在更换视频的src属性后,视频原来的timesParam属性依旧存在,可以通过重新给timesParam属性赋值来覆盖之前设置的视频提示点,或者直接传递一个空数组来清空所有的视频提示点。

3.3.让视频跳到新位置播放或暂停

  视频组件的currentTimeAndPlay属性可以让视频跳到某个时间点并从该位置开始播放,类似的另外一个属性是currentTimeAndPause,后者可以让视频跳到某个时间点并停在该时间点。

mp4Video.currentTimeAndPlay = 23;//让视频从第23秒开始播放
mp4Video.currentTimeAndPause = 30;//让视频跳到第30秒并停在第30秒

四、周杰伦读心术交互处理

1.视频分段

  考虑到视频的总长度和玩家在一次体验中并不需要看完视频的全部内容,所以整个长达5分06秒的视频最终被拆分为多段子视频,并通过用户的交互来确定应该加载哪一段。除了开头的第一段,其他的分支视频都是在用户选择了相应的牌色、花色、单双点数之后才去动态加载并播放的。

image.png

2.视频提示点

  通过视频组件的timesParam埋好选牌交互的提示点,然后就可以在onTimes回调触发后显示选牌交互动画。

mp4Video.timesParam = [{name:"showInteract", time:10}];

onTimes:function(name)
{
    switch (name)
    {
        case "showInteract"://视频播放到第10秒            //展示选牌互动动画    
            break;
    }
}

3.切换新视频

  在用户点击了某个分支之后,通过替换src的属性值来切换视频源。

mp4Video.src = "新视频URL";

4.新视频就绪

  在新视频开始播放并且画面的第一帧出现后会触发onStart回调,在onStart回调中移除选牌交互动画,这样可以让视频切换得更加平滑。

onStart:function()
{
    //移除选牌交互动画
}

五、结尾

  以上就是本次周杰伦读心术H5的核心代码以及自适应组件和视频组件在实际项目中的用法介绍,希望对您有所帮助。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

袁佳平的专栏

1 篇文章1 人订阅

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

用silverlight做动画-相机

用silverlight做动画-相机 适合初学者学习 做一个相机的动画 和做flash动画一样,准备好素材 将素材放入项目中 开始正式制作前为了方便以后重用,...

29040
来自专栏腾讯社交用户体验设计

实现下划线的N个姿势

22240
来自专栏夏时

纯 CSS 实现漂亮的大标题效果

21220
来自专栏腾讯大讲堂的专栏

iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一...

28460
来自专栏非著名程序员

Android 自定义 view 动画按钮

昨天偶偶然看见UI 给的一个交互的效果,原图如下 ? 就是下面的loginbutton,于是大概模仿了一下, 并没有做这个UI的全部效果,有兴趣的可以完善后面...

25680
来自专栏编程微刊

前端css常用的选择小汇

13420
来自专栏IMWeb前端团队

H5活动宣传页通用布局技术解决方案

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是...

23950
来自专栏前端说吧

css3-巧用选择器 “:target”

37360
来自专栏菩提树下的杨过

用Flex模拟智能手机表单输入的自动放大功能

用iphone或itouch登录过微薄的同学们想必都会发现:登录一些手机版网站(比如微薄时),表单中的输入框会自动放大,以方便用户输入,等输入完成后,页面会再次...

24360
来自专栏xiaoxi666的专栏

博客开通(附本博客样式)

博客于今日开通,在这网络资源日益丰富的年代,曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了,顺便记录下成长的经历,共勉。

20450

扫码关注云+社区

领取腾讯云代金券