อธิบายทักษะของ HTML5 ต่อไป:
16. การสนับสนุนวิดีโอ
องค์ประกอบเสียง <oadio> คล้ายกันมากและรองรับวิดีโอ HTML5 บนเบราว์เซอร์ใหม่ ในความเป็นจริงเมื่อไม่นานมานี้ YouTube ได้ประกาศวิดีโอ HTML5 ใหม่ที่ฝังอยู่ น่าเสียดายเนื่องจากเอกสาร HTML5 ไม่ได้ระบุตัวเข้ารหัสเฉพาะสำหรับวิดีโอจึงขึ้นอยู่กับเบราว์เซอร์เป็นหลัก แม้ว่า Safari และ IE9 สามารถรองรับวิดีโอในรูปแบบ H.264 แต่ Firefox และ Opera ยังคงยึดติดกับรูปแบบ Theora และ Vorbis ดังนั้นเมื่อแสดงวิดีโอ HTML5 คุณต้องจัดทำสองรูปแบบ
17. วิดีโอโหลดล่วงหน้า
ก่อนอื่นคุณต้องตัดสินใจว่าคุณต้องการเบราว์เซอร์เพื่อโหลดวิดีโอล่วงหน้าหรือไม่ มีความต้องการหรือไม่? สมมติว่าผู้เข้าชมเข้าสู่หน้าเว็บที่อุทิศให้กับการแสดงวิดีโอมีความจำเป็นอย่างยิ่งที่จะต้องโหลดหน้าล่วงหน้าเพื่อประหยัดเวลารอคอย คุณสามารถโหลดวิดีโอล่วงหน้าได้โดยการตั้งค่า preload = preload หรือเพิ่มการโหลดล่วงหน้าระหว่างพวกเขา
<วิดีโอล่วงหน้า>
-
</video>
18. การควบคุมการแสดงผล
คุณอาจสังเกตเห็นว่าด้วยรหัสข้างต้นวิดีโอจะปรากฏเป็นรูปภาพโดยไม่มีส่วนประกอบที่ควบคุมได้ เพื่อให้ได้การควบคุมการเล่นเหล่านี้เราต้องระบุคุณสมบัติการควบคุมเหล่านี้ในองค์ประกอบวิดีโอ
<วิดีโอควบคุมการโหลดล่วงหน้า>
-
</video>
19. การแสดงออกปกติ
ด้วยคุณสมบัติของรูปแบบใหม่เราสามารถแทรกนิพจน์ปกติลงในรหัสโดยตรง
<วิธีการฟอร์ม = โพสต์การกระทำ =>
<label for = username> สร้างชื่อผู้ใช้: </lable>
<อินพุต ID = ชื่อผู้ใช้ = ชื่อข้อความ = ชื่อผู้ใช้ placeHolder = 4 <> 10″ ต้องการ = ต้องการ autofocus = pattern autofocus = [a-za-z] {4,10}>>
<button type = submit> go </button>
</form>
หากคุณคุ้นเคยกับนิพจน์ทั่วไปมากขึ้นคุณจะสังเกตเห็นรูปแบบใหม่นี้: [A-ZA-Z] {4,10} ยอมรับตัวอักษรตัวพิมพ์ใหญ่บนและล่างเท่านั้น สตริงนี้ต้องมีอักขระอย่างน้อยสี่ตัวสูงถึงสิบอักขระ
20. ตรวจจับการสนับสนุนเบราว์เซอร์สำหรับคุณลักษณะ
ดังที่ได้กล่าวไว้ก่อนหน้านี้เบราว์เซอร์ทั้งหมดไม่สนับสนุนคุณสมบัติเหล่านี้ดังนั้นมีวิธีใดที่จะบอกได้ว่าเบราว์เซอร์สามารถจดจำได้หรือไม่? คำถามนี้ดีมาก นี่คือสองวิธีในการแนะนำคุณกับคุณ ตัวเลือกแรกคือการใช้ Modernizr เพื่อตรวจจับหรือคุณสามารถสร้างและวิเคราะห์องค์ประกอบเหล่านี้เพื่อดูว่าเบราว์เซอร์มีอะไรบ้าง ตัวอย่างเช่นในตัวอย่างก่อนหน้านี้หากเราต้องการตรวจสอบว่าเบราว์เซอร์สามารถเรียกใช้คุณสมบัติรูปแบบได้หรือไม่เราสามารถเพิ่ม JavaScript ลงในหน้า:
การแจ้งเตือน ('รูปแบบ' ใน document.createelement ('input')) // boolean;
ในความเป็นจริงนี่เป็นวิธีที่พบบ่อยมากในการกำหนดความเข้ากันได้ของเบราว์เซอร์ ห้องสมุด jQuery ใช้ประโยชน์จากเคล็ดลับนี้ ในรหัสข้างต้นเราสร้างองค์ประกอบอินพุตใหม่และยืนยันว่าแอตทริบิวต์รูปแบบสามารถรับรู้ได้หรือไม่ หากสามารถรับรู้ได้เบราว์เซอร์จะสนับสนุนฟังก์ชั่นนี้มิฉะนั้นจะไม่ได้รับการสนับสนุน
<script>
if (! 'pattern' ใน document.createElement ('input')) {
// ทำการตรวจสอบด้านไคลเอนต์/เซิร์ฟเวอร์
-
</script>
โปรดจำไว้ว่าสิ่งนี้จะต้องประสบความสำเร็จโดยการพึ่งพา JavaScript!
21. องค์ประกอบของมาร์ค
ฟังก์ชั่นหลักขององค์ประกอบ <mark> คือการเน้นข้อความบนหน้าเว็บที่ต้องเน้นความสำคัญของผู้ใช้ สตริงที่ห่อหุ้มในแท็กนี้จะต้องเกี่ยวข้องกับพฤติกรรมปัจจุบันของผู้ใช้ ตัวอย่างเช่นหากฉันค้นหาเปิดใจของคุณในบางบล็อกฉันสามารถใช้ JavaScript ในแท็ก <mark> เพื่อห่อแต่ละการกระทำ
<h3> ผลการค้นหา </h3>
<H6> พวกเขาถูกขัดจังหวะหลังจาก Quato พูดว่า <mark> เปิดใจของคุณ </kark> </h6>
22. เมื่อใดควรใช้ <div>
คุณยังต้องการใช้แท็ก <div> หรือไม่? แน่นอนว่าจำเป็น ตัวอย่างเช่นหากคุณต้องการห่อบางส่วนของรหัสในองค์ประกอบโดยเฉพาะอย่างยิ่งสำหรับการวางตำแหน่งเนื้อหา <div> จะเป็นตัวเลือกที่เหมาะมาก อย่างไรก็ตามหากไม่ใช่สถานการณ์ข้างต้น แต่ต้องปิดโพสต์บล็อกหรือรายการลิงค์ท้ายส่วนท้ายขอแนะนำให้คุณใช้องค์ประกอบ <บทความ> และ <av> ตามลำดับ