บังคับใช้วิดีโอ YouTube HTML5


119

เกี่ยวกับบล็อก Youtube APIพวกเขากำลังทดลองกับโปรแกรมเล่นวิดีโอHTML5ใหม่

เห็นได้ชัดว่าในการเล่นวิดีโอใน html5 คุณต้องใช้โค้ดฝัง iframe:

<iframe class="youtube-player" type="text/html" width="640" height="385"
  src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>

แต่ถ้าไคลเอนต์ไม่ได้เข้าร่วมการทดลองใช้ HTML5โปรแกรมเล่นจะถอยกลับไปที่โปรแกรมเล่นแฟลชโดยอัตโนมัติแม้ว่าเบราว์เซอร์ของลูกค้าจะสามารถใช้งานวิดีโอ HTML5 ได้ก็ตาม

จะบังคับให้เล่นวิดีโอ HTML5 ได้อย่างไรหากเบราว์เซอร์รองรับแม้ว่าผู้ใช้จะยังไม่ได้มีส่วนร่วมในการทดลองใช้ HTML5 ก็ตาม

มิฉะนั้นจะปิดใช้งานแฟลชสำรองได้อย่างไร

แก้ไข:

เป็นไปได้ที่จะบังคับให้โปรแกรมเล่น HTML ผ่านลิงก์ไปยังวิดีโอ Youtubeแต่ฉันต้องการคุณสมบัติประเภทนี้สำหรับวิดีโอแบบฝัง


จะเป็นอย่างไรหากคุณตรวจพบความสามารถ HTML5 ด้วย js และใช้รหัส youtube api ตามนั้น หรือฉันควรจะพูดว่าถ้าไม่รองรับวิดีโอ HTML5 อย่าใช้ youtube api เหมือนที่ใช้กับ Flash
David Hobs

คำตอบ:


179

ฉันพบวิธีแก้ไขแล้ว:

คุณต้องเพิ่มhtml5=1ในแอตทริบิวต์ src ของ iframe:

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

วิดีโอจะแสดงเป็น HTML5 หากมีหรือใช้ทางเลือกในการเล่นแฟลช


1
อืม - ตอนนี้มันใช้ไม่ได้แล้ว (vids เดียวกัน) แปลกดี ฉันสงสัยว่ามันใช้ได้เฉพาะกับเซิร์ฟเวอร์ youtube บางเครื่องหรือไม่?
UpTheCreek

1
ไม่ทำงานเมื่อเพิ่ม&html5=1ตอนท้ายของวิดีโอที่ไม่ได้ฝัง: /
Moshe Revah

1
การเพิ่ม&html5=1(หรือ&html5=trueอะไรทำนองนั้น) ต่อท้ายไฮเปอร์ลิงก์ (ไม่ใช่วิดีโอแบบฝัง iframe) ดูเหมือนจะไม่ทำงานใน IE หากไม่มี Flash
Ryan

1
วิดีโอ YouTube ที่มีโฆษณาจะใช้โปรแกรมเล่น Flash โดยอัตโนมัติ
หมุน

8
ฉันคิดว่ารายงานทั้งหมดมีความลำเอียง ไม่มีใครบอกว่าเขา / เธออยู่ใน "html5 beta ของ youtube" หรือไม่และนี่อาจเป็นปัจจัยสำคัญ เมื่อฉันออกจาก html5 beta ดูเหมือนว่า? html5 = 1 ไม่ได้ทำอะไรเลย ทุกวิดีโอใช้แฟลช
Paul Brewczynski

20

การเล่นวิดีโอ YouTube ในรูปแบบ HTML5 หรือไม่นั้นขึ้นอยู่กับการตั้งค่าที่https://www.youtube.com/html5ต่อเบราว์เซอร์ Chrome ต้องการเล่น HTML5 โดยอัตโนมัติ แต่แม้แต่ Firefox และ Internet Explorer ล่าสุดก็ยังใช้ Flash หากติดตั้งไว้ในเครื่อง

พารามิเตอร์ html5 = 1 ไม่ทำอะไรเลย (อีกต่อไป) ในตอนนี้ (โปรดทราบว่าไม่มีแม้แต่ในhttps://developers.google.com/youtube/player_parameters )


เพิ่งตรวจสอบฉันได้เลือกโปรแกรมเล่น HTML5 ในyoutube.com/html5แต่ถ้า & html5 = 1 ไม่ได้ระบุเป็นพารามิเตอร์สำหรับโปรแกรมเล่นแบบฝังแฟลชจะถูกโหลดเมื่อฉันระบุว่ามีการโหลดโปรแกรมเล่นพารา HTML5 ระบบปฏิบัติการ: Linux, Firefox 33 64bit
พระเจ้าซาร์

ฉันเพิ่งทดสอบhtml5=1ใน Firefox 33.0.2 และทำงานได้ดี (และไม่ต้องการให้ผู้ใช้เปิดใช้งานการตั้งค่า HTML5 บน YouTube) หากไม่มี YouTube จะส่งเวอร์ชัน Flash ตามค่าเริ่มต้น
Simon East

พารามิเตอร์ยังคงใช้งานได้ แต่การเปิดใช้งานในหน้า html5 ทำให้ youtube เริ่มต้นเป็น html5 ซึ่งดีกว่า
alanh

4

ฉันลองใช้โค้ดฝัง iframe และโปรแกรมเล่น HTML5 ปรากฏขึ้นอย่างไรก็ตามด้วยเหตุผลบางประการที่ทำให้ iframe ทำลายไซต์ของฉันโดยสิ้นเชิง

ฉันยุ่งกับโค้ดฝังวัตถุเก่าและทำงานได้ดีอย่างสมบูรณ์ ดังนั้นหากคุณมีปัญหากับ iframe นี่คือรหัสที่ฉันใช้:

<object width="640" height="360">
<param name="movie" value="http://www.youtube.com/embed/VIDEO_ID?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed width="640" height="360" src="http://www.youtube.com/embed/VIDEO_ID?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

หวังว่านี่จะเป็นประโยชน์สำหรับใครบางคน


YouTube <object>จะเลิกณ สิ้นเดือนมกราคม ใช้<iframe>แทน
Samuel Elh

<object>ยังคงใช้งานได้ในความเป็นจริง iframe มีเพียงมัน
RozzA

2

หากคุณใช้ iframe embed api คุณสามารถใส่html5:1เป็นหนึ่งในplayerVarsอาร์กิวเมนต์ได้ดังนี้:

player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: '<VIDEO ID>',
    playerVars: {
        html5: 1
    },
});

ใช้งานได้ทั้งหมด


0

แท็กอินไลน์ใช้เพื่อเพิ่ม src ของเอกสารอื่นให้กับองค์ประกอบ html ปัจจุบัน

ในกรณีของคุณเป็นวิดีโอของ youtube และเราจำเป็นต้องระบุประเภท html (4 หรือ 5) ให้กับเบราว์เซอร์ภายนอกไปยังลิงก์

ดังนั้นเพิ่ม? html = 5 ต่อท้ายลิงค์ .. :)

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.