Project - JD Literature Award

Abstract

What have I done in this project?

Provided service for over 340,000 users.
Developed the website for both PC and mobile devices.
Built UIs and implemented interactions, eg. vote, comment, play video, view information.
Led 2 versions of this project, using Vue.js + ES6 in 2018 and React + ES6 + TypeScript in 2019.
Applied a patent to solve the problem of playing videos in the Android browser.

Introduction

JD Literature Award is held by the JD.COM, Ltd from 2017. I was responsible for the frontend development from 2018. The award has 6 periods in each year. Every period has its own UIs and features. The website shows the information about the books which are the candidates and users can vote on some certain period. There are two kinds of UIs for PC and mobile devices. The image below shows the last period of the 2019 JD Literature Award.

Rem

I use rem as unit in the mobile pages. Usually our designer give us the UIs with width 750px, then we calculate the fontsize used the device width and set the page’s root font size.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1,maximum-scale=1, viewport-fit=cover" />
<script type=text/javascript>
    var deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if(deviceWidth > 750) {
        deviceWidth = 750;
    }
    var rootFontSize = (deviceWidth / 7.5).toFixed(2);
    document.documentElement.style.fontSize = rootFontSize  + 'px';
</script>

There is another way to set font size.

<style>
  @media screen and (min-width: 320px) {
    html {
      font-size: calc(42.67px + 2 * (100vw - 320px) / 55);
    }
  }
  @media screen and (min-width: 375px) {
    html {
      font-size: calc(50px + 2 * (100vw - 375px) / 39);
    }
  }
  @media screen and (min-width: 414px) {
    html {
      font-size: calc(55.2px + 4 * (100vw - 414px) / 186);
    }
  }
  @media screen and (min-width: 600px) {
    html {
      font-size: calc(80px + 4 * (100vw - 600px) / 150);
    }
  }
  @media screen and (min-width: 750px) {
    html {
      font-size: calc(100px + 6 * (100vw - 1000px) / 1000);
    }
  }
</style>

These code should add in the <head></head>, and we can add postcss-pxtorem plugin to generates rem units from pixel units.

Technical Challenge

video

Some of the books have a video to show the comments from referees. There are two main situations in video playback, inline and full screen. In iOS, when you click to play a video, the page will automatically pop up a system default native full-screen player to play the video. If we want the video to play inline on the page, it can be controlled by adding the attribute webkit-playsinline playsinline (iOS10+ support). On Android, video is played inline by default.

However, during the development test, we found that some Android devices put the video on the highest level layer, it will cover the other elements that render on the video area, and we can not change the level by setting z-index.

At that situation, if we want to solve this problem quickly, we can only hide the video area when we show the dialog layer or set the video full-screen playback in the Android environment. In the Android system, the X5 kernel browser needs to add two attributes to play the video in full screen:

1 2	x5-video-player-type="h5" x5-video-player-fullscreen="true"

But when I finished the project, I thought there might be another solution. Maybe we can use canvas to play the videos, so I write a demo and applied a patent for it.

Some of the demo code:

<script>
  var timer = null;
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  function play() {
    timer = setInterval(function() {
      if (video.currentTime >= video.duration) {
        stop();
      }
      ctx.drawImage(
        video,
        (canvas.width - video.videoWidth) / 2,
        (canvas.height - video.videoHeight) / 2,
        video.videoWidth,
        video.videoHeight
      );
    }, 16);
  }
</script>

Live Video Streaming

We need to play the live video at one period of the award, so I did some research about it. Currently, the live video streaming supports three protocols: RTMP, HLS and HTTP-FLV. The comparison chart is shown below:

Combining our needs with the advantages and disadvantages of these three live broadcast protocols, we adopted both RTMP and HLS protocols. Use RTMP first, or switch to HLS if RTMP is not supported. Although the native video tag does not support the video format of the live stream, we can use the open-source video.js. Video.js has developed a vue-video-player component for Vue, and provides a videojs-flash plugin that supports RTMP streaming and a videojs-contrib-hls plugin that supports HLS streaming. It should be noted that if both streams need to be played, the flash plugin needs to be installed before the hls plugin.

We can use npm to install the dependency.

1
2
3

npm install vue-video-player --save
npm install videojs-flash --save
npm install videojs-contrib-hls --save

Used in the component.

<template>
  <video-player
    class="video-player-box"
    ref="videoPlayer"
    :options="playerOptions"
    :playsinline="true">
  </video-player>
</template>

Set the live video attributes.

export default {
    data() {
        return {
            playerOptions: {
            	width: 360,
                autoplay: false,
                controls: true,
                techOrder: ['flash', 'html5'],
                sourceOrder: true,
                flash: { hls: { withCredentials: false } },
                html5: { hls: { withCredentials: false } },
                sources: [
	              {
	                type: 'rtmp/mp4',
	                src: 'rtmp://xxxx'
	              },
	              {
	                withCredentials: false,
	                type: 'application/x-mpegURL',
	                src: 'https://xxxx/xxxx.m3u8'
	              }
                ],
                poster: "https://xxx.jpg",
            }
        }
    }
}