Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to upload preview pictures and videos through video in HTML5", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn how to upload preview pictures and videos through video in HTML5 "this article.

When receiving the demand for uploading pictures and videos and dynamically setting poster frames for video display, the main thought is how to parse the video and get the pictures saved each frame. Baidu mostly needs to play video and click on the screenshot like the following, or use php ffmpeg expansion, which is inconsistent with the demand, a little crazy, and then first do the video picture preview function, and then change the idea of setting poster frames. Cancel auto playback and control bar by entering the time to set the video to start playing, so that what the user sees is a picture

/ * Preview * / $('.qtuploader _ items'). On (' click','[name= "viewVideoPicBtn"]', function () {var parent = $(this) .closest ('.qtab _ page'); var video = $(this) .closest (' .qtuploader _ itemsbd'). Find ('video'); var srcStr ='', htmlStr ='' If ($(this) .siblings ('.qtuploader _ _ picinputbox'). HasClass (' is-error')) {$.fn.toast ({'parentDom': parent,' classes': 'isorange',' top': '0frames,' spacing': 0, 'toastContent':' Please set the correct range of poster frames', 'autoHide': 3000' 'position': {' top': '5pxstores,' left':'50%'}) Return;} if (video.length > 0) {var thumbHeight = setSize (video) [0]; var thumbWidth = setSize (video) [1]; srcStr = video.attr ('src'); htmlStr =' your browser does not support video tags';} parent.append (htmlStr) Parent.find ('.qtuploader _ _ view video') [0] .currentTime = $(this) .siblings (' .qtuploader _ _ picinputbox'). Find ('.qtuploader _ picinput'). Val (); parent.find (' .qtuploader _ view') .fadeIn ();}) / * set poster frame preview time * / $('.qtuploader _ _ items'). On (' keyup','. Qtuploader__picinput', function () {var parent = $(this) .closest ('.qtuploader _ picinputbox'); var video = $(this) .closest (' .qtuploader _ itemsbd'). Find ('video'); var strVal = $.trim ($(this). Val ()) Console.log (strVal) if (strVal = =') {parent.addClass ('is-error'); parent.find (' .qposters _ font'). Text ('Please frame the poster');} else if (! (/ ^ [0-9] * $/ .test (strVal) {parent.addClass ('is-error'); parent.find (' .qroom_ font'). Text ('Please enter a number') } else if (video.length > 0 & & strVal > video [0] .customers) {parent.addClass ('is-error'); parent.find (' .qqroomy _ font'). Text ('not more than (' + video [0] .thanks +'); console.log ('111Musashi' + video [0] .minutes)} else {parent.removeClass ('is-error') Parent.find ('.qtuploader _ _ font') .text (' Please frame poster');}}) / * close preview * / $(document) .undelegate ('.qtuploader _ _ mask',' click') $(document) .delegate ('.qtuploader _ _ mask',' click', function () {$(this) .closest ('.qtuploader _ _ view'). FadeOut (' normal', function () {$(this) .closest ('.qtuploader _ view'). Remove ()}) / * set the preview size * / function setSize (element) {var thumbWidth = 0, thumbHeight = 0, arr = [] Var winWidth = $(window). Width (), winHeight = $(window). Height (); var imgWidth = element.width (), imgHeight = element.height (); if (imgWidth > imgHeight) {thumbHeight = parseInt (winHeight-1080); thumbWidth = parseInt ((1920 * thumbHeight) / 1080);} else {thumbHeight = parseInt (winHeight-200); thumbWidth = parseInt (1080 * thumbHeight) / 1920) } arr.push (thumbHeight, thumbWidth) return arr;} these are all the contents of the article "how to upload and preview pictures and videos through video in HTML5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.