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 มาใช้งานกันได้มีทั้งรูปทั้งวิดีโอครบเลย
![Koi Carps Fish Japanese swimming for full background tutorial](http://i0.wp.com/teerapuch.com/wp-content/uploads/2015/12/fish.png?resize=450%2C359)
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](http://i1.wp.com/teerapuch.com/wp-content/uploads/2015/12/file.png?resize=427%2C166)
coding file in this tutorial
![pattern overlay](http://i1.wp.com/teerapuch.com/wp-content/uploads/2015/12/pattern-overlay.png?resize=450%2C351)
pattern overlay
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> |
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](http://i2.wp.com/teerapuch.com/wp-content/uploads/2015/12/first-video.png?resize=450%2C258)
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 ; } |
![full video](http://i2.wp.com/teerapuch.com/wp-content/uploads/2015/12/full-video.png?resize=450%2C286)
full video
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 ; } |
![overlay](http://i0.wp.com/teerapuch.com/wp-content/uploads/2015/12/overlay.png?resize=450%2C286)
overlay
01
| < h1 >Video Background From HTML+CSS!!</ h1 > |
01
02
03
04
05
06
07
08
09
10
11
| h 1 { 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](http://i1.wp.com/teerapuch.com/wp-content/uploads/2015/12/Yanone-Kaffeesatz.png?resize=450%2C173)
Yanone Kaffeesatz
![title](http://i0.wp.com/teerapuch.com/wp-content/uploads/2015/12/title.png?resize=450%2C353)
title
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 > |
![Full Preview](http://i1.wp.com/teerapuch.com/wp-content/uploads/2015/12/Full-End.gif?resize=450%2C314)
Full Preview
แค่นี้เราก็สามารถทำวิดีโอเป็นพื้นหลัง
ง่ายๆได้แล้ว แต่ใครที่คิดว่ายังไม่ค่อยเข้าใจหรือไม่อยากเสียเวลาทำเอง
สำหรับคนที่อยากได้เว็บไซต์ที่มีวิดีโอเป็นพื้นหลังหรือมีเว็บอยู่แล้วแต่
อยากเพิ่มส่วนที่มีวิดีโอเป็นพื้นหลังก็ติดต่อเข้ามาได้นะครับ ผมดูแลให้เอง
0 ความคิดเห็น:
แสดงความคิดเห็น