5/29/2559

full background video ด้วย html และ css

20:32    No comments

full background ของเว็บไซต์เป็นส่วนสำคัญเพราะจำเป็นเหมือนกรอบที่แสดงข้อมูลของทั้งเว็บ ผ่านทาง เบื้องหน้าของพื้นหลัง ถ้าเป็นพื้นหลัง background แบบรูปภาพหรือ photo image ต่างๆคงจะคุ้นชินกันมาแล้วสำหรับวิธีการทำ แต่ถ้าพูดถึงการนำวิดีโอมาใช้เป็นพื้นหลังส่วนใหญ่จะเห็นใช้กันแต่ plugin ซึ่งก็ง่ายและรวดเร็วดี แต่วันนี้จะพามาดูวิธีการเขียน code ด้วย html และ css เพื่อให้ได้พื้นหลังแบบเป็นวิดีโอมาใช้งานกัน

full background video with html and css

มาดูวิธีการทำวิดีโอเป็นพื้นหลังกัน ด้วยวิธีนี้เราอาจจะเขียนแบบเพียงเบื้องต้นนะครับ ไม่ได้จัดเต็มแบบทุก option เพราะหากจะใช้เต็มสูบแบบนั้นจริงๆเราอาจจะใช้วิธีใช้ plugin ง่ายและรวดเร็วกว่าแต่อันนี้ผมจะทำเพียงแต่นำวิดีโอมาเป็น background แล้วก็ใส่ข้อความโตๆเอาไว้ให้เห็น และเพิ่มปุ่มสำหรับคลิกเล่น หยุด ง่ายๆเอาไว้หน่อย คิดว่าวิธีนี้ใช้แค่ HTML, CSS และ javascript แบบเบื้องต้นง่ายๆเลยน่าจะพอ เรามาลองทำกันไปพร้อมๆดูครับ

หาวิดีโอกันก่อน

เริ่มต้นกันก่อนเลยผมขอแบบพื้นฐานจริงๆคือ เราไปหาวิดีโอสำหรับมาทำเป็นพื้นหลังแบบ free ไม่มีลิขสิทธิ์กันก่อน ไม่ขอใช้แบบเป็น youtube นะครับเพราะอยากให้เล็งไปที่ codeing กันก่อน เว็บที่เราจะเข้าไปหาวิดีโอสำหรับมาทำเป็นพื้นหลังอันที่จริงก็มีอยู่เยอะ มากนะครับ อารมณ์มันจะคล้ายๆกับ photo stock นั้นแหละมีคนถ่ายความละเอียดสูงๆเข้ามาแล้วมาทำเป็นคลิปสั้นๆแบบ….สั้นมากๆ ไว้ ส่วนใหญ่ความคมชัดจะสูง ขนาดไฟล์จะเล็กอยู่แล้ว เราสามารถค้นหาได้ด้วยคำว่า video stock หรือ footage stock นะครับ
  • http://www.istockphoto.com/footage อันนี้เป็นเว็บรูปภาพขนาดใหญ่มีเงื่อนไขในการใช้นะครับ แต่เห็นมีส่วนที่เป็นวิดีโอด้วย
  • https://www.shutterstock.com/video/ อันนี้ก็เว็ยรูปภาพขนาดใหญ่เหมือนกัน มีวิดีโอให้ด้วยนะครับ ดูเรื่องสิทธิ์ให้ดีนะ ราคาเอาเรื่องอยู่
  • http://www.motionelements.com/th/free/stock-footage อันนี้จะเป็นแบบขายเหมือนกัน แต่มีฟรีบ้าง
  • https://vimeo.com/groups/freehd/ อันนี้เป็น group ใน vimeo สวยดีอยู่ฟรีด้วยครับ
  • http://www.free-hd-footage.com/ อันนี้แบบ free เลยแต่ผมว่าวิดีโอไม่ค่อยสวยเท่าไหร่
  • https://videos.pexels.com/ อันนี้ free นะครับ load มาใช้งานกันได้มีทั้งรูปทั้งวิดีโอครบเลย
ทีนี้สมมุติว่าผมเลือกได้มาแล้วอันหนึ่งเป็นตัวอย่างสำหรับทำ tutorial ให้ดูกันเฉยๆเลยเอาแบบติดลิขสิทธิ์มาใช้แล้วกัน ขอยืมวิดีโอรูปบ่อปลาคาร์ฟมาจาก istockphoto
Koi Carps Fish Japanese swimming for full background tutorial
Koi Carps Fish Japanese swimming for full background tutorial
ทีนี้เราได้วิดีโอสำหรับทำงานมาแล้ว มาเริ่มต้นสร้างหน้าเพจกันเลย โดยผมจะขอเริ่มจากการสร้าง folder ชื่อ videobg ก่อนเพื่อเก็บงานนี้กัน จากนั้นจะสร้างไฟล์ที่ชื่อ  index.php สำหรับเขียน code เพื่อสร้างวิดีโอเป็นพื้นหลังแบบเต็มหน้า และผมจะสร้างไฟล์ style.css สำหรับเขียน css แยกกันไว้อีกไฟล์ และสุดท้ายเป็นไฟล์ bg.js สำหรับเขียน javascript เพื่อกำหนดปุ่ม play ง่ายๆ (การเขียน javascript ควรไว้แยกในไฟล์สกุล .js เสมอ)
coding file in this tutorial
coding file in this tutorial
จากนั้นเพื่อเพิ่มการลดทอนปัญหาจากกรณีที่วิดีโอเราไม่มีคุณภาพมากพอหรอ ลดความคมชัดและความโดดเด่นของตัว video ที่ควรจะเป็นแค่เพียงพื้นหลังลงไปเราควรใส่รุปภาพขึ้นมาเพื่อขวางหน้าชั้นบน สุด เล็กๆอาจจะเป็นเพียง noise เล็กๆก็ได้หรือจะใช้เป็นเส้นขวางๆก็ได้ตามสะดวก ตรงนี้เราเรียกมันว่า pattern overlays ลองเข้าไปใช้ของ http://html5backgroundvideos.com/pattern-overlays/ ก็ได้นะครับ
pattern overlay
pattern overlay
งานนี้ผมเลือกใช้รูปที่เป็นจุดเล็กๆแล้วเอามาเรียงต่อกันแทนแล้วกันครับ โหลดลงไปไว้ใน folder ได้เลย จากนั้นเราก็จะมาสร้างโครงสร้างของ HTML กัน
?
ตัวอย่าง
01
02
03
04
05
06
07
08
09
10
<html>
<head>
<title>Full Background Video</title>
<link rel="stylesheet" href="style.css">
<script src="bg.js"></script>
</head>
<body>
 
</body>
</html>
ผมเรียกไฟล์ css และไฟล์ javascript ขึ้นมาเตรียมไว้เลยนะครับจะได้ไว ทีนี้ผมก็จะไปสร้างตัวดึงวิดีโอโดยใช้ tag วิดีโอของ html5 ง่ายๆดูตัวอย่างได้จาก w3school เลยนะครับ จากนั้นก็มาวางกันเลย
?
ตัวอย่าง
01
02
03
<video autoplay id="video-background" muted>
<source src="http://i.tstocking.com/video_passthrough/63735697/153/63735697.mp4" type="video/mp4">
</video>
ทีนี้เราก็จะได้วิดีโอสำหรับแสดงขึ้นมาบนหน้าจอแล้ว
first video
first video
งดงามมาก… แต่มันเพิ่งเริ่มต้นเองนะครับ ยังไม่จบ มาครับมา มาต่อกันตอนนี้เราได้วิดีโอมาวางที่หน้าเว็บแล้ว แบบเป็นวิดีโอเพียวๆไม่เอาเสียง เพราะผมใช้ mute ปิดเสียงวิดีโอเอาไว้เป็นพื้นหลังไม่จำเป็นต้องมี sound ก็ได้น่า… และจะเห็นว่า ผมไม่ได้เรียกส่วนของ controls ขึ้นมาเพราะมันไม่เหมาะสำหรับทำพื้นหลัง แล้วเดี๋ยวเราค่อยทำปุ่มกันเอง ถัดมาผมจะกำหนดค่าของวิดีโอนี้ให้มันเต็มจอ ไปเลยนะครับ เราจะใช้ความสามาถของ css เข้ามาช่วยงานเรากันหน่อย
?
ตัวอย่าง
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
body {
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    background-size: cover;
}
 
#video-background {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
 
}
ตรงนี้มันเยอะมากอธิบายคร่าวๆก็แล้วกันนะครับ ก็คือตัว body ผมกำหนดให้ไม่ต้องมี padding และ margin อะไรเลยและ fixed รูปภาพด้วยและทำให้ค่ามันเป็นแบบ cover หากรูปไม่ได้ขนาดเต็มจอ ส่วนใน selector ที่เป็น video นั้นผมก็ให้ fix เหมือนกัน กำหนด width และ height เป็น 100% เต็มด้วย
full video
full video
เรียบร้อย เท่านี้เราก็ได้วิดีโอเต็มจอแล้ว แต่ยังไม่เสร็จงานของเรากันครับ ตามที่เราวางแผนกันเอาไว้คือต้องมีจุดเล็กๆขึ้นมาเพื่อกันเรื่องคุณภาพของ วิดีโอกันด้วย งั้นเราจะมาใส่ overlay กัน
?
ตัวอย่าง
01
<div class="overlay"></div>
?
ตัวอย่าง
01
02
03
04
05
06
07
08
09
10
11
.overlay {
    position: absolute;
    z-index: 0.5;
    opacity: 0.5;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url('bg.png');
    background-repeat: repeat;
}
ตรงนี้คือเราวางจุดเล็กๆของเราให้เต็มหน้าจอเรียงกัน แล้วจับ repeat ให้เต็มหน้าจอ ตรงนี้ผมทำให้มันจางๆจะได้เห็นไม่ชัดเท่าไหร่แบบใสๆหน่อยโดยใส่ opacity ลงไปแล้วบังคับให้มันอยู่หน้า layer video ของเราด้วย z-index นะครับ
overlay
overlay
อาจจะมองไม่ค่อยเห็นเท่าไหร่ ขอถัดไปเลยแล้วกันนะครับ เราจะใส่ หัวข้อทีเ่ป็น Title ใหญ่ๆไว้ตรงกลางเพื่อเป็นข้อความบอกเนื้อหาหน่อย ผมจะใช้เป็น h1 แล้วกัน
?
ตัวอย่าง
01
<h1>Video Background From HTML+CSS!!</h1>
?
ตัวอย่าง
01
02
03
04
05
06
07
08
09
10
11
h1 {
    position: absolute;
    top: 40%;
    width: 100%;
    font-size: 50px;
    letter-spacing: 5px;
    color: #fff;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    text-align: center;
    text-shadow: 2px 2px #000;
}
คือตัวหนังสืออยู่เหนือรูปภาพหรือวิดีโอ นี่ยังไงก็อย่าลืมใส่เงาเอาไว้หน่อยนะครับ ไม่งั้นมองข้อความลำบากแน่ๆเลย แล้วก็จะขอใช้ font จาก google font api เพื่อเติมแต่งอีกนิด แล้วก็ต้องหยิบขึ้นมาอยู่เหนือ layer ของ overlay ด้วย z-index ด้วยนะครับ
Yanone Kaffeesatz
Yanone Kaffeesatz
ลองมาดูผลงานกันหน่อยนะครับ
title
title
เรียบร้อย…ทีนี้เรายังขาดปุ่มสำหรับกด play หรือ pause เพราะเราไม่ได้สั่งให้ video มันวน loop ไปเรื่อยๆ อันที่จริงเราไม่จำเป็นต้อง loop วิดีโอพื้นหลังก็ได้นะครับ บางทีคนที่เข้ามาใช้อาจจะไม้ต้องการดูหรือไม่ต้องการให้มันวนหลายๆรอบ เราก็สามารถเสนอทางเลือกอย่างการใช้ปุ่มหยุดได้ครับ โดยที่ผมจะใช้เป็นข้อความแล้วก็ใช้ความสามารถของ javascript เข้ามาช่วย
?
ตัวอย่าง
01
<h2 onclick="playPause()">Play / Pause</h2>
?
ตัวอย่าง
01
02
03
04
05
06
07
08
var vd = document.getElementById("video-background");
 
function playPause() {
if (vd.paused) {
vd.play();
} else {
vd.pause();
}
?
ตัวอย่าง
01
02
03
</pre>
<script src="bg.js"></script>
<pre>
ตัว javascript นี่ต้องเอามาไว้ด้านล่างนะครับมันถึงจะทำงานได้ถูกต้อง ส่วนตัว play() function และ pause() เป็นของ HTML5 นะครับลองไปค้นเล่นกันได้ อันนี้คือพอมีคนคลิกเข้ามาที่ข้อความ play ละก็ให้ทำการเรียก call function ที่ชื่อ playPause() ได้เลย เพียงเท่านี้เราก็จะได้ปุ่มง่ายๆสำหรับควบคุมแล้วนะครับ
Full Preview
Full Preview
แค่นี้เราก็สามารถทำวิดีโอเป็นพื้นหลัง ง่ายๆได้แล้ว แต่ใครที่คิดว่ายังไม่ค่อยเข้าใจหรือไม่อยากเสียเวลาทำเอง สำหรับคนที่อยากได้เว็บไซต์ที่มีวิดีโอเป็นพื้นหลังหรือมีเว็บอยู่แล้วแต่ อยากเพิ่มส่วนที่มีวิดีโอเป็นพื้นหลังก็ติดต่อเข้ามาได้นะครับ ผมดูแลให้เอง

Line : teerapuch
Mail : teerapuch [@] hotmail.com

ข้อมูลอ้างอิง w3Schools

0 ความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)