Fullscreen Background Video With Play&Pause Button From Scratch In HTML,CSS,JAVASCRIPT
Merhaba Sevgili Ziyaretçilerimiz;
NetBufe.Com Kazanç amacıyla kurulmamış ve ücretsiz yararlanılan bir sitedir. Video içeriklerinde yer alan reklamlar ile NetBufe.Com sitesinin hiçbir menfaat bağlantısı söz konusu olmayıp ilgili reklamlar videonun yüklü olduğu siteler tarafından veya videoların yüklü olduğu sitelere yüklemeyi yapan kişilerce eklenmiş reklamlardan ibarettir.
Videoların paylaşıma açıldığı sitelerde yüklü videolar/video linkleri herhangi bir nedenle kaldırıldığında ve/veya kısıtlandığında/yasaklandığında sitemizde de ilgili videonun gösterimi otomatik olarak son bulmaktadır.
Telif Hakkı(Copyright Notice) Olabilecek Açık Kullanım İzni Verilmemiş Video Materyaller Hakkında Önerimiz İlgili Videoyu İzlemeyerek(Bu Yönde Materyallerin İzlenmesine Destek Vermeyerek), Resmi Olarak Satın Alıp İzlemeniz Yönündedir.
Tarafımızdan Üyelerimizin sayfamız üzerinde ayrıntılı olarak yer alan tüm bu durumlara ilişkin bilgi ve gerekleri okuyup anladıkları ve kabul ettikleri varsayılmaktadır.
Sitemize ücretsiz ve kolayca üye olarak birçok video paylaşım sitelerindeki kendi videolarınızın linklerini ekleyebilir, Sık Kullanılanlar ve Çalma Listelerinize kaydedebilir ve üye olmanın diğer tüm ayrıcalıklarından üye sosyal alanınızda yararlanabilirsiniz. Video Linkleri Ekleyebileceğiniz Örnek Bazı Siteler
NetBufe.COM
Açıklama
Hi there !
Welcome to my first youtube Video and 1st tutorial .I Am a web developer /Graphic designer/UI developer and most importantly a teacher who wants to share his knowledge with the world:
If your are looking for fullscreen background video tutorial which has some "fade in" and "fade out" functions with opacity for your website I recommend you watch my Tutorial and just follow along .This tutorial is great for people who run gym website or are looking for nice and clean Background video code with A "Pause and Play Button having interactivity to it ."
Please do Visit my
1) website www.codebreakerinfinity.com
2) http://www.codebreakerinfinity.com/Templates/My-portfolio/index.html
3) http://musicjam.x10host.com/InfoGuru/wordpress/
4)http://www.codebreakerinfinity.com/Templates/SEO/
What Will You Learn:
1) Download the code editor at http://brackets.io/
2) Create a Full width Background Video from scratch using HTML,CSS,JAVASCRIPT
3) Correction made to the Backgroundvideo2 javascript code just copy and past this code using the script tag
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#BackGvid button");
if(window.matchMedia('(prefers-reduced-motion)').matches){
vid.removeAttribute("");
vid.pause();
pauseButton.innerHTML="Paused";
}
function vidFade(){
vid.classList.add("stopfade");
}
vid.addEventListener('ended',function(){
//only funtional if loop is removed
vid.pause();
//
vid.Fade();
});
pauseButton.addEventListener("click",function(){
vid.classList.toggle("stopfade");
if(vid.paused){
vid.play();
pauseButton.innerHTML ="pause";
}
else{
vid.pause();
pauseButton.innerHTML ="paused";
}
})
Yorum Yazınız
