• HTML5 through the vedio tag video loop play example code


    Before HTML5, the video was played through < embed > tag The < embedded > tag is used to embed multimedia elements in HTML pages <embed src=”1.swf”width=”400″> The < Object > tag is used to embed multimedia elements in HTML pages <object data=”1.swf”width=”400″></object> Existing problems: Need flash, low efficiency If the browser does not support […]

  • Implementation example of HTML5 video full screen play / auto play


    Recently, we started to develop a new version of the company’s official website. At the top of the front page is a small video playing in full screen Page code <header class=”header” style=”width:100%;position: relative;”> <?php if(!Helper::isMobile()) { ?> <video id=”homeVideo” class=”home-video” autoplay loop muted poster=”res/video/cover.jpg”> <source src=”res/video/home_video.mp4″ type=”video/mp4″> </video> <?php } ?> </header> PHP simply […]

  • How to play multiple videos in HTML5 video loop


    Recently, the demand encountered in the development is: wechat scanning courseware QR code, playing its corresponding courseware video Design process 1. When scanning the QR code, save the video list into the model, and save the first one in order not to get the first video again in the HTML interface model.addAttribute(“playUrl”, videos.get(0).getVideoUrl()); model.addAttribute(“videoUrls”, JsonUtils.toJson(videos)); […]

  • Implementation of HTML5 WebView element location tool


    1、 Tool selection There are three ways to locate WebView elements: use driver.page_ Source method: write the obtained page content into an HTML file, then open the HTML file with browser, and locate the element using F12 debugging tool Developer tools, a debugging tool provided with the Chrome browser, can be input into the Chrome […]

  • Solve the problem that the video tag in HTML5 cannot be played in IOS system


    1. First, from the front-end point of view, how to make Safari browser compatible with video and support playback (no solution has been found). 2. After searching the online information for many times, it is found that using the background can solve the problem. The solution point is in the HTTP protocol response header (accept […]

  • H5 package drop-down refresh


    The front end will inevitably cooperate with the native Android and IOS to do some H5 nested pages. However, in the actual development, we often encounter various compatibility problems. I will not list them one by one. This time, I mainly share the compatibility problems of dual systems in the native drop-down refresh. The most […]

  • Some suggestions on HTML5 SEO optimization


    for instance < title > Taobao – Taobao! I like < / Title > Use the description and keyword tag (no more than 300 characters is preferred) < meta name = “description” content = “Taobao – Asia’s largest online trading platform, providing all kinds of clothing, beauty, home furnishing, digital, phone / point card recharge […]

  • HTML5 input input input box default prompt text to move left to right example code


    In HTML5, the default prompt text of input input box moves left to right. First, demonstrate the code of input input box <style> * { margin: 0; padding: 0; } .sousuo { width: 458px; height: 34px; margin-left: 190px; margin-top: 200px; border: 2px solid red; } </style> </head> <body> < input class = “sousuo” type = […]

  • Analysis of HTML5 landmark


    Landma recently encountered a simple introduction to the concept of the next blog in Chinese, no obstacles found. What is landmark LandmarkIs a method used to represent the organization structure of a web page. Usually a web page can be divided into several blocks Take a video website as an example. There is a banner […]

  • Summarize what are the HTML5 custom attributes


    definition H5 provides us with the prefix “data -” to define the required properties, and then set the custom properties. <div id=”box1″ data-name=”Musk”></div> <div id=”box2″ data-full-name=”Elon Musk”></div> obtain Use H5 custom attribute object dataset to get let box1 = document.getElementById(‘box1’); let box2 = document.getElementById(‘box2’); box1.dataset.name // Musk box2. dataset.fullName //Elon Musk (hump) box1.getAttribute(‘data-name’) // Musk […]

  • Notes on the use of mandmobile in HTML5


    Notes on the use of man Mobile Mandmobile is Didi’s open source Vue mobile UI component library for financial scenarios (non-financial classes can also be used). Recently, our company is incubating a financial product, and I intend to use it. For first-time users, according to the official documents, they will step on some pits or […]

  • HTML5 drag and drop API to automatically generate photo frame


    Implementation function: drag the desktop picture into the designated place to generate photo frame and related information. Photo frames need to be configured by themselves, set as background, and set in CSS. The effect is as follows: HTML part: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title></title> <link rel=”stylesheet” type=”text/css” href=”test3.css”/> <script type=”text/javascript” src=”test3.js”></script> </head> <body> […]