คุณสามารถเล่นวิดีโอ HTML5 อัตโนมัติบน iPad ได้หรือไม่?

123

<video>แท็กautoplay="autoplay"แอตทริบิวต์ทำงานได้ดีใน Safari

เมื่อทดสอบบน iPad ต้องเปิดใช้งานวิดีโอด้วยตนเอง

ฉันคิดว่ามันเป็นปัญหาในการโหลดดังนั้นฉันจึงทำการตรวจสอบสถานะของสื่อแบบวนซ้ำ:

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

สถานะยังคงอยู่ที่0บน iPad ซาฟารีสก์ท็อปของฉันมันผ่านไป0, และในที่สุด1 4บน iPad จะเข้าถึงได้ก็ต่อ4เมื่อฉันแตะลูกศร "เล่น" ด้วยตนเอง

ยิ่งไปกว่านั้นการโทร$("#periscopevideo").get(0).play()จากการคลิกผ่านonClickก็ใช้งานได้เช่นกัน

Apple มีข้อ จำกัด ใด ๆ เกี่ยวกับการเล่นอัตโนมัติหรือไม่? (ฉันกำลังใช้ iOS 5+ อยู่)

— Jem
แหล่งที่มา

ที่เกี่ยวข้อง / รายการที่ซ้ำกัน: stackoverflow.com/questions/2841966/… , stackoverflow.com/questions/4259928/…

— apsillers

บางทีเราควรดูที่การตรวจจับเบราว์เซอร์และคุณควรเรียก playVideo (): stackoverflow.com/questions/26895492/…

— Redtopia

งานนี้สำหรับฉันgithub.com/Stanko/html-canvas-video-player

— dimitar

บล็อกโพสต์ที่เป็นประโยชน์ในหัวข้อนี้: webkit.org/blog/6784/new-video-policies-for-ios

— Matthias M

opera mini ใน ios รองรับการเล่นอัตโนมัติตามค่าเริ่มต้นในขณะที่ chrome, firefox และ safari ไม่มีและไม่มีตัวเลือกให้เปิด

— ไม่ระบุชื่อ

156

อัปเดต iOS 10

การห้ามเล่นอัตโนมัติถูกยกเลิกใน iOS 10 - แต่มีข้อ จำกัด บางประการ (เช่น A สามารถเล่นอัตโนมัติได้หากไม่มีแทร็กเสียง)

หากต้องการดูรายการข้อ จำกัด ทั้งหมดโปรดดูเอกสารอย่างเป็นทางการ: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 และก่อนหน้า

ใน iOS 6.1 จะไม่สามารถเล่นวิดีโออัตโนมัติบน iPad ได้อีกต่อไป

ข้อสันนิษฐานของฉันว่าทำไมพวกเขาถึงปิดใช้งานคุณสมบัติเล่นอัตโนมัติ?

เนื่องจากเจ้าของอุปกรณ์หลายรายมีขีด จำกัด การใช้ข้อมูล / แบนด์วิดท์ในอุปกรณ์ของตนฉันคิดว่า Apple รู้สึกว่าผู้ใช้เองควรตัดสินใจเมื่อเริ่มใช้แบนด์วิดท์

หลังจากการวิจัยเล็กน้อยฉันพบสารสกัดต่อไปนี้ในเอกสารของ Apple เกี่ยวกับการเล่นอัตโนมัติบนอุปกรณ์ iOS เพื่อยืนยันข้อสันนิษฐานของฉัน:

"Apple ได้ตัดสินใจปิดการเล่นวิดีโออัตโนมัติบนอุปกรณ์ iOS ผ่านการใช้งานทั้งสคริปต์และแอตทริบิวต์

ใน Safari บน iOS (สำหรับอุปกรณ์ทั้งหมดรวมถึง iPad) ซึ่งผู้ใช้อาจอยู่ในเครือข่ายเซลลูลาร์และถูกเรียกเก็บเงินต่อหน่วยข้อมูลการโหลดล่วงหน้าและการเล่นอัตโนมัติจะถูกปิดใช้งาน ไม่มีการโหลดข้อมูลจนกว่าผู้ใช้จะเริ่มต้น "- เอกสารของ Apple

นี่คือคำเตือนแยกต่างหากที่แสดงในหน้าอ้างอิง Safari HTML5เกี่ยวกับสาเหตุที่ไม่สามารถเล่นสื่อแบบฝังใน Safari บน iOS:

คำเตือน : เพื่อป้องกันการดาวน์โหลดที่ไม่ได้ร้องขอผ่านเครือข่ายเซลลูลาร์ด้วยค่าใช้จ่ายของผู้ใช้สื่อที่ฝังไว้จะไม่สามารถเล่นโดยอัตโนมัติใน Safari บน iOS ได้ผู้ใช้จะเริ่มเล่นเสมอ คอนโทรลเลอร์จะถูกจัดให้โดยอัตโนมัติบน iPhone หรือ iPod touch เมื่อเริ่มเล่น แต่สำหรับ iPad คุณต้องตั้งค่าแอตทริบิวต์การควบคุมหรือระบุคอนโทรลเลอร์โดยใช้ JavaScript

สิ่งนี้หมายถึง (ในแง่ของ code) คือว่า Javascript ของplay()และload()วิธีการไม่ได้ใช้งานจนกว่าจะมีการประทับจิตผู้ใช้เล่น, เว้นแต่play()หรือload()วิธีการที่จะถูกเรียกโดยการกระทำของผู้ใช้ (เช่นเหตุการณ์คลิก)

โดยทั่วไปปุ่มเล่นที่เริ่มโดยผู้ใช้จะใช้งานได้ แต่onLoad="play()"เหตุการณ์ไม่ทำงาน

ตัวอย่างเช่นสิ่งนี้จะเล่นภาพยนตร์:

<input type="button" value="Play" onclick="document.myMovie.play()">

ในขณะที่สิ่งต่อไปนี้จะไม่ทำอะไรบน iOS:

<body onload="document.myMovie.play()">

— dsgriffin
แหล่งที่มา

1

อืม 3 เดือนของการสร้างนาฬิกาปลุกออนไลน์สำหรับ iPhone Safari ลงท่อระบายน้ำ! เรา (sleep.fm) คิดหาวิธีที่จะทำให้โทรศัพท์ตื่นตัวในขณะที่แอปเปิดอยู่ แต่ตอนนี้ด้วย iOS 6.1 เสียงปลุกจะไม่เล่น ทำงานได้ดีใน iOS 6.0 มีงานทำไหม?

— chaser7016

1

เดี๋ยวก่อนเรามีนาฬิกาปลุกบนเว็บบนมือถือ (sleep.fm) สำหรับ iPhone Safari และทำงานอีกครั้งดังนั้นจึงมีวิธีแก้ปัญหาสำหรับการขาดการสนับสนุนการเล่นอัตโนมัติ html5

— chaser7016

1

@ Jonah1289 ตามบล็อกโพสต์ของคุณใน Sleep.fm Brian Cavalier ทวีตลิงก์ github ที่มีชื่อเรื่องต่อไปนี้เล่นเสียงอัตโนมัติบน ipad หรือ iphone โดยใช้ webkitaudiocontext แทนแท็กเสียงอาจเป็นจุดเริ่มต้นที่ดี

— Francisco

1

โปรดดูรายละเอียดเพิ่มเติม - มีวิธีแก้ปัญหาเฉพาะใดบ้างสำหรับการขาดการสนับสนุนการเล่นอัตโนมัติ

— Umopepisdn

11

สิ่งที่ควรทำคืออนุญาตให้เล่นอัตโนมัติเมื่อใช้ wifi และมีการเล่นด้วยตนเองหรือแจ้งให้ผู้ใช้ทราบว่าวิดีโอต้องการเล่นอัตโนมัติเมื่ออยู่บนเครือข่ายมือถือ

— Ric

16

ฉันต้องการเริ่มต้นด้วยการบอกว่าฉันรู้ว่าคำถามนี้เก่าและมีคำตอบที่ยอมรับแล้ว แต่ในฐานะผู้ใช้อินเทอร์เน็ตที่โชคร้ายที่ใช้คำถามนี้เพื่อยุติการพิสูจน์ว่าผิดหลังจากนั้นไม่นาน (แต่ก่อนที่ฉันจะทำให้ลูกค้าไม่พอใจสักหน่อย) ฉันต้องการเพิ่มความคิดและข้อเสนอแนะของฉัน

แม้ว่า @DSG และ @Giona จะถูกต้อง แต่คำตอบของพวกเขาก็ไม่มีอะไรผิด แต่ก็มีกลไกสร้างสรรค์ที่คุณสามารถใช้เพื่อ "ไปไหนมาไหน" เพื่อที่จะพูดถึงข้อ จำกัด นี้ นั่นไม่ได้หมายความว่าฉันกำลังหลีกเลี่ยงการหลีกเลี่ยงคุณลักษณะนี้ในทางตรงกันข้าม แต่เป็นเพียงกลไกบางอย่างเพื่อให้ผู้ใช้ยังคง "รู้สึก" ราวกับว่าไฟล์วิดีโอหรือไฟล์เสียงกำลัง "เล่นอัตโนมัติ"

วิธีแก้ไขอย่างรวดเร็วคือซ่อนแท็กวิดีโอไว้ที่ใดที่หนึ่งบนหน้าอุปกรณ์เคลื่อนที่เนื่องจากฉันสร้างไซต์ที่ตอบสนองฉันจึงทำสิ่งนี้สำหรับหน้าจอขนาดเล็กเท่านั้น แท็กวิดีโอ (ตัวอย่าง HTML และ jQuery):

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

เมื่อมีการซ่อนไว้ในหน้าเมื่อผู้ใช้ "คลิก" เพื่อชมภาพยนตร์ (ยังคงมีการโต้ตอบกับผู้ใช้ไม่มีวิธีใดที่จะหลีกเลี่ยงข้อกำหนดนั้นได้) แทนที่จะไปที่หน้าสำหรับดูรองฉันจะโหลดวิดีโอที่ซ่อนอยู่ สิ่งนี้ได้ผลเป็นหลักเนื่องจากไม่ได้ใช้แท็กสื่อ แต่ได้รับการโปรโมตเป็นอินสแตนซ์ Quicktime แทนดังนั้นการมีองค์ประกอบวิดีโอที่มองเห็นได้จึงไม่จำเป็นเลย ในตัวจัดการสำหรับ "คลิก" (หรือ "แตะ" บนมือถือ)

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

และวิโอลา. สำหรับ UX ผู้ใช้คลิกที่วิดีโอเพื่อเล่นและ Quicktime จะเปิดขึ้นเพื่อเล่นวิดีโอที่พวกเขาเลือก สิ่งนี้ยังคงอยู่ในข้อ จำกัด ที่ว่าวิดีโอสามารถเล่นได้ผ่านการกระทำของผู้ใช้เท่านั้นดังนั้นฉันจึงไม่บังคับให้ข้อมูลกับใครก็ตามที่ไม่ได้ตัดสินใจที่จะดูวิดีโอด้วยบริการนี้ ฉันค้นพบสิ่งนี้เมื่อพยายามหาว่า Youtube ดึงสิ่งนี้ออกมาด้วยมือถือได้อย่างไรซึ่งโดยพื้นฐานแล้วการสร้างหน้า Javascript ที่ดีจริงๆและองค์ประกอบแฟนซีที่ซ่อนอยู่เช่นในกรณีของแท็กวิดีโอ

tl; dr ต่อไปนี้เป็น "วิธีแก้ปัญหา" ในการพยายามสร้างคุณลักษณะ UX แบบ "เล่นอัตโนมัติ" บนอุปกรณ์ iOS โดยไม่ต้องอยู่เหนือข้อ จำกัด ของ Apple และยังคงให้ผู้ใช้ตัดสินใจว่าต้องการดูวิดีโอ (หรือเสียงที่เหมือนกันมากที่สุด 'ยังไม่ได้ทดสอบ) ตัวเองโดยไม่ต้องมีเพียงโหลดโดยไม่ได้รับอนุญาต

นอกจากนี้สำหรับผู้ที่แสดงความคิดเห็นซึ่งมาจาก sleep.fm น่าเสียดายที่สิ่งนี้ยังไม่สามารถแก้ปัญหาของคุณได้ซึ่งเป็นการเล่นเสียงตามเวลา

ฉันหวังว่าจะมีคนพบว่าข้อมูลนี้มีประโยชน์มันจะช่วยฉันได้หนึ่งสัปดาห์ในการส่งข่าวร้ายไปยังลูกค้าที่ยืนกรานว่าพวกเขามีคุณสมบัตินี้และฉันก็ดีใจที่หาวิธีส่งมอบได้ในที่สุด

แก้ไข

การค้นหาเพิ่มเติมระบุว่าวิธีแก้ปัญหาข้างต้นใช้สำหรับอุปกรณ์ iPhone / iPod เท่านั้น iPad เล่นวิดีโอใน Safari ก่อนที่จะฉายแบบเต็มดังนั้นคุณจะต้องมีกลไกบางอย่างในการปรับขนาดวิดีโอเมื่อคลิกก่อนที่จะเล่นมิฉะนั้นคุณจะจบลงด้วยเสียงและไม่มีวิดีโอ

— แบรนดอนบั๊ก
แหล่งที่มา

2

มันจะดีกว่าถ้าใช้$dummyVideo.get(0)แทนวงเล็บดังนั้น jQuery สามารถล้มเหลวได้อย่างสง่างามหากการเลือกของคุณว่างเปล่า

— Micros

12

เพียงแค่ตั้งค่า

webView.mediaPlaybackRequiresUserAction = NO;

การเล่นอัตโนมัติใช้ได้กับฉันบน iOS

— เอ่อหลี่
แหล่งที่มา

29

วิธีนี้ใช้ไม่ได้กับเว็บไซต์ซึ่งใช้ได้เฉพาะกับไซต์ที่คุณใช้แอปพลิเคชันแบบเนทีฟ

— Brandon Buck

5

ฉันหมายถึงจากหน้าเว็บ (ตามที่คำถามกำลังถาม) นี่เป็นสิ่งที่ไม่สามารถเข้าถึงได้โดยสิ้นเชิงใช่ Javascript ในเบราว์เซอร์ไม่สามารถทำได้ สิ่งนี้ใช้ได้เฉพาะเมื่อคุณเรียกใช้ไซต์ของคุณภายใน WebView จากแอปพลิเคชันที่คุณควบคุมได้ดังนั้นจึงไม่สามารถแก้ปัญหาได้

— Brandon Buck

6

@izuriel เพื่อความยุติธรรมเขาติดแท็กคำถามด้วย "objective-c" และ "โกโก้ทัช" ดังนั้นจึงไม่ใช่เรื่องไกลตัวที่จะคิดว่าเขาใช้ webview

— Kloar

3

โดยปกติแล้วแท็ก @Kloar จะถูกเพิ่มเพื่อให้ได้รับความสนใจมากขึ้นหรือความเข้าใจผิดโดยทั่วไปเกี่ยวกับปัญหาที่พวกเขากำลังพยายามแก้ไข ผู้ที่ถามคำถามอาจคิดว่าการกล่าวถึงวัตถุประสงค์ -C เหมือนกับการพูดว่า "iOS" (และคล้ายกับโกโก้ทัช) แท็ก "uiwebview" ไม่อยู่ในรายการ แต่ฉันจึงไม่รวมสิ่งนั้นไว้เป็นตัวเลือกที่ทำงานได้ คำถามกล่าวถึงการใช้ Safari บนเดสก์ท็อปและ iPad (ไม่มีอะไรเกี่ยวกับแอป) และใช้รหัสสาธิต Javascript เพื่อแก้ไขข้อบกพร่องของสถานการณ์ สรุปแล้วฉันคิดว่ามันเป็นการเดิมพันที่ปลอดภัยมากกว่าคำถามนี้กำลังมองหาเว็บที่ไม่ใช่โซลูชันแบบเนทีฟ

— Brandon Buck

บน Android: developer.android.com/reference/android/webkit/…

— cottonBallPaws

11

ใน iOS 10 ตอนนี้วิดีโอสามารถเล่นอัตโนมัติได้ แต่มีเพียงวิดีโอเท่านั้นที่ปิดเสียงหรือไม่มีแทร็กเสียง เย้!

ในระยะสั้น:

<video autoplay> ตอนนี้องค์ประกอบจะให้เกียรติแอตทริบิวต์เล่นอัตโนมัติสำหรับองค์ประกอบที่ตรงตามเงื่อนไขต่อไปนี้:
- <video> องค์ประกอบจะได้รับอนุญาตให้เล่นอัตโนมัติโดยไม่ต้องใช้ท่าทางสัมผัสของผู้ใช้หากสื่อต้นทางไม่มีแทร็กเสียง
- <video muted> องค์ประกอบต่างๆจะได้รับอนุญาตให้เล่นอัตโนมัติโดยไม่ต้องใช้ท่าทางสัมผัสของผู้ใช้
- หาก<video>องค์ประกอบได้รับแทร็กเสียงหรือถูกปิดเสียงโดยไม่มีท่าทางของผู้ใช้การเล่นจะหยุดชั่วคราว
- <video autoplay> องค์ประกอบจะเริ่มเล่นก็ต่อเมื่อมองเห็นได้บนหน้าจอเช่นเมื่อเลื่อนเข้าไปในวิวพอร์ตทำให้มองเห็นได้ผ่าน CSS และแทรกลงใน DOM
- <video autoplay> องค์ประกอบจะหยุดชั่วคราวหากไม่สามารถมองเห็นได้เช่นถูกเลื่อนออกจากวิวพอร์ต

ข้อมูลเพิ่มเติมที่นี่: https://webkit.org/blog/6784/new-video-policies-for-ios/

— JackKalish
แหล่งที่มา

4

แอตทริบิวต์เล่นอัตโนมัติทำงานบนพีซีไม่ทำงานบนมือถือ ฉันพยายามหลายครั้งแล้ว

— huykon225

7

ในการอ้างอิง Safari HTML5นี้คุณสามารถอ่าน

เพื่อป้องกันการดาวน์โหลดที่ไม่ได้ร้องขอผ่านเครือข่ายเซลลูลาร์ด้วยค่าใช้จ่ายของผู้ใช้สื่อที่ฝังไว้จะไม่สามารถเล่นโดยอัตโนมัติใน Safari บน iOS ได้ผู้ใช้จะเริ่มเล่นเสมอ คอนโทรลเลอร์จะถูกจัดให้โดยอัตโนมัติบน iPhone หรือ iPod touch เมื่อเริ่มเล่น แต่สำหรับ iPad คุณต้องตั้งค่าแอตทริบิวต์การควบคุมหรือระบุคอนโทรลเลอร์โดยใช้ JavaScript

— Giona
แหล่งที่มา

38

"นอกเหนือจากไฟล์ GIF ซึ่งสามารถมีได้หลาย MB และใช้แบนด์วิดท์โดยที่คนอื่นไม่รู้ตัว"

— Simon_Weaver

@Simon_Weaver x12 ครั้งสำหรับเวลาส่วนใหญ่จะแม่นยำ

— Burak Tokak

2

ให้ปิดเสียงวิดีโอก่อนเพื่อให้แน่ใจว่าเล่นอัตโนมัติใน iOS จากนั้นเปิดเสียงหากคุณต้องการ

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>

— โมฮัมหมัดอาลีอัคบารี
แหล่งที่มา