The story behind the H5 of "Wu Yifan army"

Creativity is always a propositional composition, the early stage of the project team learned:

1. Wu Yifan signed the national Blitz will be a three-dimensional complete campaign, the brand team hope Tgideas in H5 This module, through a brilliant idea to detonate the topic

2. Without any material, Wu Yifan can only give out 1 hours to record some content in the filming interval.

3. Because this period of time Wu Yifan in the costume drama, his hair is gone ...

Under various conditions, we can only solve problems with Chao Jin, in the suspense design need to have a point that can catch people, Wu Yifan short hair style become sharp, popular assault is a military theme of the game, that the army to join this thing with the above conditions seems clever and reasonable, in the public, especially in the eyes of fans, Your favorite star to join the Army this is a big event that will certainly arouse concern and discussion. Confirmation of this concept, the rest is the form of the problem, an entertainment news will certainly arouse widespread concern, so we propose to use the form of news page, to do creative landing.

The interesting thing about this case is: Most people really use a news mentality to focus on the news, but suddenly move up and run out of the picture of the Wu Yifan, will certainly exceed the user's inherent expectations of content, so the idea of the most important tipping point in this form. Believe that a lot of people turn out all hope that his friends can also be "startled" (later saw a lot of analysis posted on the day of the Ghost Festival is too sharp, in fact, I would like to say that the material was intended to be sent at 12 o'clock today, but someone in advance in the circle of friends did the exposure ...)

As for the creative concept of video calling, in fact, is not what the new play, before this form of the case is also very many, the key point of this module is: With the star face-to-face communication, this is a very core fan to the content, like Wu Yifan people will certainly look at the beloved star and their own close dialogue, So here is the user familiar form, the word out the true image of the advertising content.

Planing to the creative module, in fact, in my opinion, more critical is the implementation, more important than the thought.

Tgideas internal temporary team, by the vision, front-end, development, creativity, multimedia, small partners quickly start to evaluate the implementation of difficulties.

Technically, how does video play smoothly? HTML5 in ios,android, micro-mail, hand Q, Weibo, Tencent News how does the browser's compatibility problem be solved when the client is open? A lot of technical problems, until now our front siege lions are still optimizing the solution. In terms of design, when does the news page open to allow the video to play automatically? How can the whole experience create surprises? If the user again to see this message on the PC side, after the click of the PC page display form, can still have interactive fun? Our design lions are also in iterative optimization. The preparation of material, in order to let Wu Yifan within 1 hours of rapid completion of the recording of material, Tgideas the designer personally, output a complete interactive prototype, but also output a complete interactive demo, convenient Wu Yifan can quickly understand the creative point, and in the filming process follow up the entire production. The whole process also has external partners to actively cooperate with the artist filming the coordination and implementation, as well as the final polish of the copy.

(Figure 1, design of the prototype manuscript)

(Figure 2,tgideas Designers for the convenience of Wu Yifan understanding, their performance output demo)

(Figure 3, creative output PC version, ensure multi-terminal experience)

In the age of mobile Internet, the quality of communication material is the core tipping point, the effective combination of creativity and technology, there will be wonderful chemical reaction.

In retrospect, this Wu Yifan enlistment case, is the former PC end rich media advertising creative form on the mobile terminal clever reappearance. In fact, is a harsh condition under the implementation of the comparison in place of the smart, presumably the industry to do interactive partners must also think so.

But I think this case will also have some value, for a focus on creativity and design of the inhouse team, compared to the award, we are more concerned with the effective communication of users. Very happy in the mobile side of the interactive advertising model throws a stoning, expect him to cause enough ripple, let us see more wonderful ideas.

-Front End posts-

In the "Wu Yifan" H5 in the circle of Friends brush screen, see the Internet many students interested in the technology behind, just by chance to share with you (spit slot). If you happen to have a problem with Android video AutoPlay and two consecutive video playback (no need to trigger in between), hopefully this article will help you.

About the realization of the principle of the H5, online has been analyzed very detailed, I do not have to do more introduction, interested students can click here

This time to share the difficult and compatible ideas that are being met under Android compatibility:

The first problem is to achieve Page1 in the picture inside the figure to suddenly move up, and then go out of the page, then the video in the initialization can not appear in the icon, in iOS set a poster on the good, But under Android, video is not so friendly to poster support, and there are all sorts of initialization effects. Video initializes the effects of the Android platform without setting the controls (pictured below)

The solution is actually very simple, is to overlay a picture on the video (the picture for the first frame of the film), when the beginning of playback, then hide the image to achieve the effect of simulating poster. This raises another problem, the width of the video on this page is adaptive, meaning that the width and height will be scaled with the width of the screen, so the width covered on the video cannot be fixed, and also be scaled with the video.

Here we will use the technique of maintaining the aspect ratio of elements to add the Padding-top percent value to the element. Because padding is a percentage of the value, it is relative to the width of the containing block. Our Video 1 ratio is 580x386, so the Padding-top value is 386/580=66.55%. The implementation code is as follows:

The second is two consecutive video playback problem (the middle does not need to trigger), the problem for a long time.

<div class= "Video-box" > <div class= "video" > Insert video...</div> <div class= "Bg-poster" ></div > </div> video-box{position:relative;width:100%} video{width:100% height:100%}. bg-poster{width:100% PA dding-top:66.55%; Position:absolute; top:0; left:0;
Background:url (./bg_poster.jpg) no-repeat 0 0; Background-size:cover}

Android video playback is required to trigger the user initiative. User initiative trigger behavior such as: Touch, click (Note: Zepto tap is not triggered), similar to setinterval this type or touching after settimeout playback, are not feasible.

Our demand is that the user enters the page, when the page scrolls a certain height, starts to play the video 1, the video 1 playback completes, does not need the user to manually trigger then plays the video 2.

The logic that translates to the front end is to say: After the user scrolls the page certain height, want to play the video continuously 1,2 the intermediary user is no user triggers behavior.

So then the solution to this: when the user has trigger behavior, the simultaneous initialization of video 1 and video 2, to the video 1 add ended event, video 1 playback after the video directly play 2 [V2.play ()]

$ (document). One ("Touchstart", function () {$ ("#v1") [0].play (); settimeout (function () {$ ("#v1") [0].pause ()}, 200); $ (" #v2 ") [0].play (); settimeout (function () {$ (" #v2 ") [0].pause ()}, 200);});

But the reality is brutal (you'll be prompted to parse the error on Android or the frame will allow you to choose how to open the file)

Since the above method is not good, then use another method: when the user first touch screen page to initialize the video 2, and then the user scroll a certain height of the time to play the video 1, when the video 1 playback finished, in the callback directly play Video 2:

First touchscreen initialization video 2$ (document). One ("Touchstart", function () {$ ("#v2") [0].play (); $ (#v2) [0].addeventlistener ("Canplay" , function (EVT) {$ ("#v2") [0].pause ();}); )//scrolling page to a certain distance to play video 1var Isplay; $ (document). On (' Touchmove ', function () {if (isplay) return; var d = $ ("#v1") [0].getboundingclientrect (). bottom; if (d <) {$ ("#v1") [0].play (); isplay = True;}}); /video 1 Playback complete callback play video 2$ ("#v1") [0].addeventlistener ("Ended", function (EVT) {$ ("#v2") [0].play ();});

But this will still be an error, I think is not canplay event, the video has not been initialized to complete, but the document can not find the video initialization complete API.

So I tried all the events that seemed to be the same as the video initialization (thanks to 2w to try all kinds of APIs). including Oncanplaythrough oncanplay onplay onplaying onprogress onreadystatechange ... All the results are not good, no ... No, I'm going to have to recharge my Android tester first.

But I promised the needs, with tears to be completed ~ (in fact, I will tell you I was already started to think, when the video 1 played, I want to add a button to remind users to click, and then play Video 2 Mody.)

Later, after repeated debugging and testing, found a rule, the video 2 in the control bar on the manual trigger playback, and so on, and then manually tentative, and then play 1, and other video 1 after the end of the call video 2 is normal, will not be an error. It's amazing, there's wood!

Basically can be summed up as a rule: as long as the video 2 has been played, even a frame on the line, so that when the video 1 played after the play Video 2, is normal!

Well, since we find the rules, then it's good to do, how to monitor the video broadcast? There is no ready-made API. It can only be controlled by other events.

Because of the N-many events that have been tried before, the timeupdate debut. A document explanation is a script that runs when the playback position changes (for example, when a user quickly enters a different position in the media).

The logic is that whenever a video is played, the event is constantly triggered. When you have the playback time (currenttime>0), it shows that you have already played it, and then pause it. Waiting to be play again ();

var v1= $ ("#v1") [0];var v2= $ ("#v2") [0];//first touchscreen playback initialization video 2$ (document). One ("Touchstart", function () {V2.play ();}); /video 1 playback complete, callback playback video 2v1.addeventlistener ("Ended", function (evt) {v2.currenttime = 0; V2.play ()});//Video 2 Add event listener if already played, Suspend function Initvideo () {if (v2.currenttime) {v2.pause (); V2.removeeventlistener ("Timeupdate", Initvideo, False);} v2 . AddEventListener ("Timeupdate", Initvideo, False)//scrolling page to a certain height play video 1var isplay; $ (document). On (' Touchmove ', function () {var d = v1.getboundingclientrect (). Bottom; if (isplay) return; if (D <) {V1 . Play (); Isplay = true; } });

OK ~ Fee Dickens finally is compatible with Android, the heart is very tired. Continue to optimize, try not to just need a scrolling event to complete this interaction, but also fell into the android inside the Touchmove touchend hole inside ... To be Continued ~

Summary: Android under 1. There can be no two initialized video, error 2. There is no user initiative to trigger the behavior, play () execution is invalid, but in the case of the video has been played without the user to actively trigger direct play () is possible (must have been played, Even if the initialization is complete, direct play () is not possible.

The last question about compatible Tencent news app and iOS self-browser is here. Also in some iphone5 and 5S under Safari, if the current page has a full-screen video behind it, even if it is not displayed, the location is not in the window. Click on the page will appear "point through" the bug, the page of any touch screen events are not captured, that is, touch screen events are not seen in the video Rob (thank Sonic Help locate the bug) solution in the video hidden when setting width:1px; height:1px; Wait until the playback time to set the width of the screen.