Development of 1000 Farmers Optimal Selection System

1. Control in Video List and Development of Qiannong Optimal Selection System (T:I8O-285I-O282 V Forest)
//Get All Videos Tags in the DOM
var videoTags = document.querySelectorAll('video');
//Control the video pause for playback
var pauseAll = function () {

//Change this orientation
var self = this;
[].forEach.call(videoTags, function (i) {

i !== self && i.pause();

});
}
//Change the array elements in the DOM array, call() Change this point
[].forEach.call(videoTags, function (i) {

 i.addEventListener('play', pauseAll.bind(i));   

});
Note: call(): Calls one method of an object and replaces the current object with another object, for example, arrayA.call(A,args1,args2), where the A object calls the method of the arrayA object.

2. Sliding page jitter during video list playback
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="telephone=no" name="format-detection" />
<title>GST</title>
<!-- CSS style -->
<style>
    * {
        margin: 0;
        padding: 0;
        /* Prohibit template copying */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    html,
    body {
        font-size: 16px;
        background: #fff;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
  
            /* Main style code: */
    #app {
        width: 100vw;
        min-height: 100vh;
        height: auto;
        overflow: hidden;
        overflow-y: scroll;
        /* Prevent iOS Carton */
        -webkit-overflow-scrolling: touch;
    }

    ul.box {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }

    ul.box li {
        display: block;
        margin-top: .12rem;
    }

    ul.box li>p {
        box-sizing: border-box;
        padding: 0 .1rem;
        line-height: .4rem;
        font-size: .3rem;
    }

    ul.box li>video {
        margin-top: .1rem;
        width: 100%;
        height: auto;
        object-fit: fill;
        overflow: hidden;
    }
</style>

</head>

<body>

<div id="app">
    <ul class="box" id="videoBox">
        <li>
            <p>1,The Netherlands of Norway</p>
            <video controls controlslist="nodownload" disablePictureInPicture playsinline="" x5-playsinline=""
                playsinline="" webkit-playsinline=""
                poster="https://cs.xinpianchang.com/uploadfile/article/2019/11/05/5dc0e9357cad8.jpeg@960w_540h_1e_1c.jpg"
                src="https://qiniu-xpc10.xpccdn.com/5c54f52f221d1.mp4"></video>
        </li>
        <li>
            <p>2,I'm Adidas-Grey Wolf!</p>
            <video controls controlslist="nodownload" disablePictureInPicture playsinline="" x5-playsinline=""
                playsinline="" webkit-playsinline=""
                poster="https://cs.xinpianchang.com/uploadfile/article/2019/11/05/5dc051a64adbc.jpeg@960w_540h_1e_1c.jpg"
                src="http://oldvod2.v.news.cn/1F/FE/1f74d72eedda3dc922b3487f49619c4730b4fbfe.mp4"></video>
        </li>
    </ul>
</div>

</body>

</html>
Note: #app default minimum height: min-height:100vh, height:auto, hide when overflow: hidden, scroll when y axis: overflow-y: scroll.

3. Introduction of video tag related attributes

<video 
    controls 
    controlslist="nodownload" 
    disablePictureInPicture 
    x5-video-player-type='h5'
    x5-video-player-fullscreen='true' 
    playsinline 
    webkit-playsinline 
    x-webkit-airplay="allow" 
    poster=""
    src=""
></video>

Note: Property introduction

Controls: Display controls to the user, such as play buttons;
autoplay: the video is played as soon as it is ready;
controlslist="nodownload": hide the video label download button;
disablePictureInPicture: Hide video tag picture-in-picture;
x5-video-player-type='h5': H5 player with X5 kernel enabled;
x5-video-player-fullscreen='true': full screen settings;
x5-video-player-orientation="portraint": declare the direction supported by the player, horizontal screen: landscape, vertical screen: portraint, default vertical screen play, whether live or full screen H5 is generally vertical screen play, but this property requires x5-video-player-type to turn on H5 mode;
playsinline: play inline;
webkit-playsinline: play inline;
x-webkit-airplay="true / allow": devices that support Airplay;
poster=": specify the actual image when the video is downloaded, or the image displayed before the user clicks the play button;
src=": URL to play video;
Loop: start playing again after the current media file has finished playing (loop playing);
preload: The video is loaded when the page loads and ready to play;
Width: set the width of the video player;
Height: Set the height of the video broadcaster;
Muted: specifies that the audio output of the video should be muted;
style="object-fit:fill;" css3 style settings fill the entire screen with videos, not at the original scale of the video
Full-screen display of video through property settings and style control;

Tags: Front-end Mobile IE iOS css3

Posted on Wed, 13 Nov 2019 21:20:48 -0500 by perezf