html5-video-player | html5实现的视频播放功能

I am trying to iterate over unique youtube video links to get screenshot.

After debugging, I noticed for the forloop below, JS spawn 2 process threads, 1 for each index i . The processALink() function in the second thread seems to start before the processALink() in the first thread has ended fully.

Why is this happening? I thought using async/wait stops this from happening.

The forloop is inside a async function. The code below is just a snippet from the oringinal source code.

I'm building a nodejs app that streams a video from the disk to the user. Thanks to this question, i have a working video feed for a "static" video file that is stored on disk, so far so good.

My problem is that i need to transcode the video on the fly, to do this i used fluent-ffmpeg and i was successful at implementing the transcoding, but the HTML5 player only shows the first 3-4s of the video, and then stops. I'm guessing the problem is the filesize, but even when i harcode it nothing changes.

Any idea ? Thanks a lot :)

YouTube embedded video </code> tags have <strong>touch-event-listeners</strong>. Active touch-event listeners cause <strong>scroll performance issues</strong> - AKA <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=262660" rel="noreferrer"><em>jank</em></a>. I usually manage to fix active touch-event related jank issues by <strong>using</strong> <code>touch-action: initial</code> <strong>in CSS</strong>. This <strong>does not work</strong> for Youtube embedded video <code><iframe></code> elements.</p> <hr> <h2>Intro:</h2> <p><a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners" rel="noreferrer">Kayce Basques</a> - Google techie - writes:</p> <blockquote> <p>When you scroll a page and there's such a delay that the page doesn't feel anchored to your finger, that's called scroll jank. Many times when you encounter scroll jank, the culprit is a touch event listener. </p> <p>Touch event listeners are often useful for tracking user interactions and creating custom scroll experiences, such as cancelling the scroll altogether when interacting with an embedded Google Map.</p> <p>Currently, browsers can't know if a touch event listener is going to cancel the scroll, so they always wait for the listener to finish before scrolling the page.</p> </blockquote> <p>I have found a way to sidestep this with CSS using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action" rel="noreferrer">touch-action</a></p> <blockquote> <p>The touch-action CSS property specifies whether, and in what ways, a given region can be manipulated by the user via a touchscreen (for instance, by panning or zooming features built into the browser).</p> </blockquote> <p>If I use <code>touch-action: initial</code> the problem disappears. </p> <p>If you want to see what causes scroll jank and what does not, examine the screenshot below</p> <p><a href="https://i.stack.imgur.com/3UyNw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3UyNw.png" alt="How to see scroll jank in dev tools"></a></p> <p>Red buttons cause jank while green ones don't. The only differece between the two is that red buttons are set to <code>touch-action: manipulation</code> which makes red buttons actively "listen" and process input before scrolling can proceed</p> <hr> <p><strong>The issue</strong></p> <p>I embed videos from Youtube. The iframes contain touch event listeners that are active. The method I mentioned above does not work. I don't have access to Youtube code to edit the listeners and <a href="https://stackoverflow.com/a/37721906/8157693">set them to passive</a>.</p> <p>I have tried to narrow down the issue. I have found that the element with the class <code>.html5-video-player</code> has the following CSS</p> <pre><code>.html5-video-player { touch-action: manipulation; } </code></pre> <p>According to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#manipulation" rel="noreferrer">the docs</a>, <code>manipulation</code> can</p> <blockquote> <p>[...] Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).</p> </blockquote> <p>and </p> <blockquote> <p>[...] is also often used to completely disable the delay of click events caused by support for the double-tap to zoom gesture.</p> </blockquote> <p>All of which are things I don't need.</p> <p>Logic says all I need to do is add this to my CSS</p> <pre><code>.html5-video-player { touch-action: initial; } </code></pre> <p>but that doesn't work, nor does this:</p> <pre><code>.html5-video-player { touch-action: initial !important; } </code></pre> <p>or this:</p> <pre><code>.html5-video-player { touch-action: unset !important; touch-action: initial !important; } </code></pre> <p>or even this:</p> <pre><code>.html5-video-player { touch-action: none !important; } </code></pre> <p>Even if I try a different approach like:</p> <pre><code>*>iframe, iframe>*, *>.html5-video-player, .html5-video-player>*, .html5-video-player, iframe>*>.html5-video-player, iframe .html5-video-player { /* <---- All of these don't work */ touch-action: initial /* and all other variations mentioned above */ } </code></pre> <p>It still does not work. </p> <hr> <p>For a reference on what it actually looks like on screen examine the screenshot below</p> <p><a href="https://i.stack.imgur.com/Ya3FU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ya3FU.png" alt="Image of what Youtube iframe touch even listener looks like in dev tools"></a></p> <h2>Code sandbox:</h2> <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>* { max-width: 500px; margin: 1em auto; text-align: justify } button { color: white !important; background: green; } button:nth-child(odd) { /* <---- these buttons have active touch event listners and hinder scrolling */ background: red; touch-action: manipulation } *>iframe, iframe>*, *>.html5-video-player, .html5-video-player>*, .html5-video-player, iframe .html5-video-player { /* <---- All of these don't work */ touch-action: initial }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><p>Lorem ipsum dolor sit amet, ea audiam feugiat voluptatibus mea, eum ex prima electram. Malis tamquam ad nam, ius ne laudem accusata dissentiet. Quidam vocent inciderint eu sea, mel eu consul constituto, vix congue quidam fierent id. Et justo tantas populo his, laudem altera mei an. An dictas ancillae mediocrem ius. Exerci scaevola ei nam, ad vel prima mandamus. Pro eu eruditi probatus splendide, has ex nonumes minimum, sint blandit an sea. Etiam tincidunt his ad, ex assum fabellas deterruisset vix. Usu ex diam molestiae similique, an viris aliquip tacimates eam. Cum vitae nonumes te, ne ius nostro omittam probatus, mea te meis commodo reprehendunt. Purto omittam probatus at eam. Eam fugit inermis ut, cu fastidii inimicus vituperatoribus usu. Libris sapientem posidonium mea ut, an ipsum postulant referrentur mea. Et vim nihil ponderum disputationi, fuisset menandri percipitur sed te, labores mnesarchum appellantur has et.<button>Button</button> Brute tation sea te, quas temporibus vel an. Nam cu legere malorum, sea ut<button>Button</button> tollit insolens reformidans. Ut mei vide mucius copiosae, eum laudem eligendi an. Invidunt deterruisset an his, ex duis apeirian vel. Cum ut quaeque sensibus expetenda. Nec cu audiam delicatissimi. Ius quod vulputate constituam no, cu lobortis consectetuer duo. Tota simul populo et quo, ad per aliquip graecis consetetur, mei et adhuc laboramus. Aeque nostro vocent eu quo, ad alia virtute pro, eu sit graeci honestatis. Dolore volutpat efficiendi nam id, in pro case choro. Cum in liber dissentiunt necessitatibus. Sit ut recusabo sadipscing disputando, congue salutatus scribentur duo ei. Vim eu natum integre feugait, at esse tincidunt usu. Nonumy accusata in cum. Augue voluptua antiopam in nec, ut aperiam albucius detraxit usu. Mucius salutatus mei no, congue maiestatis pro cu. Agam tota volutpat usu ne, atqui scribentur dissentiet in usu. Vel justo option pertinax at, justo essent at sit. Mea te vivendo conceptam,<button>Button</button> eos sonet antiopam concludaturque ea, eos ei falli oporteat deserunt. Ne vix libris scripta prompta, vis ex vitae impetus mandamus. Pri ne populo incorrupte percipitur, reque putent dignissim et vis. Saepe fuisset qui eu, in probo assueverit nam. An quo scriptorem appellantur disputationi, usu dicta veritus in. Ne deterruisset voluptatibus qui, cu usu tamquam persecuti, pri detracto gloriatur definitiones id. Veniam inermis ut has. In timeam efficiendi efficiantur his, vix posse facilis ea, altera sententiae consectetuer eu mea. Eu qui sonet nusquam molestie, ex dicant <button>Button</button>facete platonem mea, in facer alterum his. Cu eum appetere sadipscing. Alii eirmod invenire est ea. Te qui modo ponderum maluisset, saepe exerci accumsan est et. Unum quas velit ei ius, sit ridens commune conceptam ei. Est purto putent accusamus in. In mel graeci labores, eos enim idque ex. Id tollit putent sed, laoreet accommodare consectetuer eu duo. Augue facilisi explicari no vis. Eu cum placerat gloriatur, vel virtute vituperatoribus ex, ipsum ocurreret eu sed. At his aliquid adolescens, delectus deterruisset eu<button>Button</button> pro. His dicat dolores ex, vel id tempor referrentur, agam congue maiestatis nec id. Ei vix option menandri appellantur. Fabulas graecis ponderum mea te. Ad solum maluisset assentior eam, qui libris indoctum scriptorem cu. At elit legere iisque sea, eius ponderum et nam. Has ne aliquid impedit corrumpit, an munere rationibus sea. Ut qui facilis vivendo consectetuer. Explicari neglegentur comprehensam te pri. Sanctus iudicabit deterruisset ea his. Nam te affert nullam, ex diam contentiones vix. Mel cu nisl autem docendi. Cu possit tamquam aliquid eum, congue iudico ut pro, lobortis praesent at quo. Vim cu tibique adipiscing. His nobis vocent tritani et. Mei ne deserunt constituam, usu prima putant et. In has duis audiam delectus, id nam tota delectus, no sanctus facilisi accusata sed. Audire deseruisse qui ei, no mel soleat doming, an pri agam posse eleifend. Duo lucilius elaboraret et. Eu illud ludus aperiri duo, cu malis dolorem eos. Reque aperiri similique vim ut, eu vel hinc possit. No nusquam nominavi elaboraret sea, at solum ignota his. At quando everti definitionem pri. Eu eum meis consulatu, nec audiam vivendo ne, eruditi accusamus persequeris cum no. Nam ne purto legimus. Qui saepe utroque meliore in. Dicunt nonumes referrentur per id. Ne mel pertinacia constituto appellantur. Eos cu alii habeo iudicabit. Nec et verterem abhorreant quaerendum, qui an nobis noluisse consectetuer, no vero utinam facete has. Eu semper impetus intellegebat vis, ad mea scripta percipit, et cibo zril clita mel. Quo elitr partiendo comprehensam no. Mundi quaerendum at usu. Vel et iisque comprehensam vituperatoribus. Has appetere moderatius et, agam decore conceptam no pro, vide aliquam salutandi cum te. Quo probo deleniti imperdiet ne. Facer dignissim ad sed, possit lucilius moderatius ne eum, eius reque eam ex. Assum fierent pro no. Eu ignota commodo facilis eum, per ex mutat mandamus mediocrem. Ei his tamquam perpetua. Ei epicurei erroribus disputationi usu. Eos delenit aliquando tincidunt eu. Ad option utamur nam, quo eu munere altera delenit, causae ornatus molestie no vix. Pro ne antiopam consulatu. Ea mei accusam mentitum appetere, mea prima tincidunt assueverit at. Ius appetere accusamus ex, pri an justo sonet. Ne omnis iisque per. Dicam menandri ea mel. Audiam assentior no mel, ea dicam vituperata pri, at eum timeam offendit vivendum. In eum voluptatibus vituperatoribus, et mei meis inani putent. Sit eu aliquid tractatos definiebas. Populo omnesque necessitatibus eum no, dicant graece dolores vix ne. Nec ei homero recusabo complectitur, graecis urbanitas in duo. Prima complectitur id vim, no quas causae expetendis duo. Volumus recusabo adolescens ut duo. No eos erat electram instructior, adhuc nemore conceptam et duo</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/6h4_-F6jnyk?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen>

Lorem ipsum dolor sit amet, ea audiam feugiat voluptatibus mea, eum ex prima electram. Malis tamquam ad nam, ius ne laudem accusata dissentiet. Quidam vocent inciderint eu sea, mel eu consul constituto, vix congue quidam fierent id. Et justo tantas populo his, laudem altera mei an. An dictas ancillae mediocrem ius. Exerci scaevola ei nam, ad vel prima mandamus. Pro eu eruditi probatus splendide, has ex nonumes minimum, sintButton blandit an sea. Etiam tincidunt his ad, ex assum fabellas deterruisset vix. Usu ex diam molestiae similique, an viris aliquip tacimates eam. Cum vitae nonumes te, ne ius nostro omittam probatus, mea te meis commodo reprehendunt. Purto omittam probatus at eam. Eam fugit inermis ut, cu fastidii inimicus vituperatoribus usu. Libris sapientem posidonium mea ut, an ipsum postulant referrentur mea. Et vim nihil ponderum disputationi, fuisset menandri percipitur sed te, labores mnesarchum appellantur has et. Brute tation sea te, quas temporibus vel an. Nam cu legere malorum, sea ut tollit insolens reformidans. Ut mei videButton mucius copiosae, eum laudem eligendi an. Invidunt deterruisset an his, ex duis apeirian vel. Cum ut quaeque sensibus expetenda. Nec cu audiam delicatissimi. Ius quod vulputate constituam no, cu lobortis consectetuer duo. Tota simul populo et quo, ad per aliquip graecis consetetur, mei et adhuc laboramus. Aeque nostro vocent eu quo, ad alia virtute pro, eu sit graeci honestatis. Dolore volutpat efficiendi nam id, in pro case choro. Cum in liber dissentiunt necessitatibus. Sit ut recusabo sadipscing disputando, congue salutatus scribentur duo ei. Vim eu natum integre feugait, at esse tincidunt usu. Nonumy accusata in cum. Augue voluptua antiopam in nec, ut aperiam albucius detraxit usu. Mucius salutatus mei no, congue maiestatis pro cu. Agam tota volutpat usu ne, atqui scribentur dissentiet in usu. Vel justo option pertinax at, justo essent at sit. Mea te vivendo conceptam, eos sonet antiopam concludaturque ea, eos ei falli oporteat deserunt. Ne vix libris scripta prompta, vis ex vitae impetus mandamus. Pri ne populo incorrupte percipitur, reque putent dignissim et vis. Saepe fuisset qui eu, in probo assueverit nam. An quo scriptorem appellantur disputationi, usu dicta veritus in. Ne deterruisset voluptatibus qui, cu usu tamquam persecuti, pri detracto gloriatur definitiones id. Veniam inermis ut has. In timeam efficiendi efficiantur his, vix posse facilis ea, altera sententiae consectetuer eu mea. Eu qui sonet nusquam molestie, ex dicant facete platonem mea, in facer alterum his. Cu eum appetere sadipscing. Alii eirmod invenire est ea. Te qui modo ponderum maluisset, saepe exerci accumsan est et. Unum quas velit ei ius, sit ridens commune conceptam ei. Est purto putent accusamus in. In mel graeci labores, eos enim idque ex. Id tollit putent sed, laoreet accommodare consectetuer eu duo. Augue facilisi explicari no vis. Eu cum placerat gloriatur, vel virtute vituperatoribus ex, ipsum ocurreret eu sed. At his aliquid adolescens, delectus deterruisset eu pro. His dicat dolores ex, vel id tempor referrentur, agam congue maiestatis nec id. Ei vix option menandri appellantur. Fabulas graecis ponderum mea te. Ad solum maluisset assentior eam, qui libris indoctum scriptorem cu. At elit legere iisque sea, eius ponderum et nam. Has ne aliquid impedit corrumpit, an munere rationibus sea. Ut qui facilis vivendo consectetuer. Explicari neglegentur comprehensam te pri. Sanctus iudicabit deterruisset ea his. Nam te affert nullam, ex diam contentiones vix. Mel cu nisl autem docendi. Cu possit tamquam aliquid eum, congue iudico ut pro, lobortis praesent at quo. Vim cu tibique adipiscing. His nobis vocent tritani et. Mei ne deserunt constituam, usu prima putant et. In has duis audiam delectus, id nam tota delectus, no sanctus facilisi accusata sed. Audire deseruisse qui ei, no mel soleat doming, an pri agam posse eleifend. Duo lucilius elaboraret et. Eu illud ludus aperiri duo, cu malis dolorem eos. Reque aperiri similique vim ut, eu vel hinc possit. No nusquam nominavi elaboraret sea, at solum ignota his. At quando everti definitionem pri. Eu eum meis consulatu, nec audiam vivendo ne, eruditi accusamus persequeris cum no. Nam ne purto legimus. Qui saepe utroque meliore in. Dicunt nonumes referrentur per id. Ne mel pertinacia constituto appellantur. Eos cu alii habeo iudicabit. Nec et verterem abhorreant quaerendum, qui an nobis noluisse consectetuer, no vero utinam facete has. Eu semper impetus intellegebat vis, ad mea scripta percipit, et ciboButton zril clita mel. Quo elitrButton partiendo comprehensam no. Mundi quaerendum at usu. Vel et iisque comprehensam vituperatoribus. Has appetere moderatius et, agam decore conceptam no pro, vide aliquam salutandi cum te. Quo probo deleniti imperdiet ne. Facer dignissim ad sed, possit lucilius moderatius ne eum, eius reque eam ex. Assum fierent pro no. Eu ignota commodo facilis eum, per ex mutat mandamus mediocrem. Ei his tamquam perpetua. Ei epicurei erroribus disputationi usu. Eos delenit aliquando tincidunt eu. Ad option utamur nam, quo eu munere altera delenit, causae ornatus molestie no vix. Pro ne antiopam consulatu. Ea mei accusam mentitum appetere, mea prima tincidunt assueverit at. Ius appetere accusamus ex, pri an justo sonet. Ne omnis iisque per. Dicam menandri ea mel.Button Audiam assentior no mel, ea dicam vituperata pri, at eum timeam offendit vivendum. In eum voluptatibus vituperatoribus, et mei meis inani putent. Sit eu aliquid tractatos definiebas. Populo omnesque necessitatibus eum no, dicant graece dolores vix ne. Nec ei homero recusabo complectitur, graecis urbanitas in duo. Prima complectitur id vim, no quas causae expetendis duo. Volumus recusabo adolescens ut duo. No eos erat electram instructior, adhuc nemore conceptam et duo

How can I turn off / disable / reset the touch event listener inside a Youtube embed </code>?</p>