tag:blogger.com,1999:blog-88807099960100760952021-05-12T17:12:59.464+03:00مدونة ايجي مارك مان الشاملةMarkManhttp://www.blogger.com/profile/16746647917977487126noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-8880709996010076095.post-70887601307337584762021-05-12T15:27:00.034+03:002021-05-12T17:12:27.896+03:00 <h1>Video Scroll Autoplay</h1><div class='scroll-spacer'><h2>Content</h2></div><div class='video-wrap'> <video autoplay muted playsinline loop controls poster="http://placehold.it/350x350"> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video></div><div class='scroll-spacer'><h2>Content</h2></div> <script> //<![CDATA[ window.addEventListener('load', videoScroll); window.addEventListener('scroll', videoScroll); function videoScroll() { if ( document.querySelectorAll('video[autoplay]').length > 0) { var windowHeight = window.innerHeight, videoEl = document.querySelectorAll('video[autoplay]'); for (var i = 0; i < videoEl.length; i++) { var thisVideoEl = videoEl[i], videoHeight = thisVideoEl.clientHeight, videoClientRect = thisVideoEl.getBoundingClientRect().top; if ( videoClientRect <= ( (windowHeight) - (videoHeight*.5) ) && videoClientRect >= ( 0 - ( videoHeight*.5 ) ) ) { thisVideoEl.play(); } else { thisVideoEl.pause(); } } } } //]]></script> <style> /*https://www.w3schools.com/html/mov_bbb.mp4*/ video { display: block; height: auto; margin: auto; position: relative; width: 100%; } .video-wrap { margin: 0 auto; position: relative; width: 90%; } .video-wrap:after { border-bottom: 1px solid red; content: ''; display: block; position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style> <!-- فيديو مباشر بدون موارد <video class="js-plyr" controls playsinline poster="رابط الصورة المصغرة" src="https://blackedick.com/wp-content/uploads/2021/04/Nf-Busty-3.mp4"></video>------------ <section class="smooth-scroll"> <div style=""></div><div class="vid" data-cursor-text="Watch video" data-cursor="color-accent-lilac" data-cursor-stick="#cursor-stick-area"><video style="cursor:pointer;" id="cursor-stick-area" class="grid-vid" controls playsinline muted disablepictureinpicture controlslist="nodownload" src="https://media.videoask.com/transcoded/testimonials/david/media.m4v"></video> </div></section>--> MarkManhttp://www.blogger.com/profile/16746647917977487126noreply@blogger.com0tag:blogger.com,1999:blog-8880709996010076095.post-26357088348045178782021-05-12T02:11:00.012+03:002021-05-12T03:00:00.748+03:00<p>&nbsp;مرحبا بكم فى مدونة&nbsp;</p><p>egy mark man</p><p>هذه المدونة لمساعدة واثراء المحتوى العربي التقني</p><p><br /></p><p>شكرا لكل القائمين عليها</p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-G4zarAziTVA/YJsUpc1kOOI/AAAAAAAAAKo/5HBeJPMKH803zBWcjgrzOk0in3cKRBCAACPcBGAsYHg/s1200/moza.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="750" data-original-width="1200" src="https://1.bp.blogspot.com/-G4zarAziTVA/YJsUpc1kOOI/AAAAAAAAAKo/5HBeJPMKH803zBWcjgrzOk0in3cKRBCAACPcBGAsYHg/s320/moza.jpg" width="320" /></a></div><br /><p><br /></p><p></p><p>تحياتي للجميع</p><p>Egy mark man</p>MarkManhttp://www.blogger.com/profile/16746647917977487126noreply@blogger.com0