การอภิปรายสั้นๆ เกี่ยวกับการกรอกข้อผิดพลาดของวิดีโอ html5 บนเทอร์มินัลมือถือ

บทความนี้จะแนะนำเทอร์มินัลวิดีโอ html5 บนมือถือที่เติมข้อผิดพลาดและแบ่งปันกับทุกคนโดยมีรายละเอียดดังนี้:

 <video id=video style=object-fit:fill เล่นอัตโนมัติ webkit-playsinline playinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=portraint src=video.mp4 />< /video><!-- object-fit: fill เนื้อหาวิดีโอเติมเต็มคอนเทนเนอร์วิดีโอทั้งหมด โปสเตอร์:img.jpg หน้าปกวิดีโอเล่นอัตโนมัติ: เล่นอัตโนมัติ - โหลดวิดีโอทั้งหมดเมื่อหน้าโหลดเมตา - โหลดเฉพาะข้อมูลเมตาเมื่อหน้าโหลดไม่มีเลย - อย่าโหลดวิดีโอเมื่อหน้าโหลดแบบปิดเสียง: เมื่อตั้งค่าแอตทริบิวต์นี้ จะระบุว่าเอาต์พุตเสียงของวิดีโอควรถูกปิดเสียง webkit -playsinline playinline : การเล่นแบบอินไลน์ x5-video-player-type=h5 : เปิดใช้งานเครื่องเล่น x5 core H5 x5-video-player-fullscreen=การตั้งค่าเต็มหน้าจอที่แท้จริง การตั้งค่าจริงและเท็จจะนำไปสู่รูปแบบที่แตกต่างกัน x5-video-orientation=portraint: ประกาศทิศทางที่เครื่องเล่นรองรับ ค่าที่เป็นตัวเลือกคือหน้าจอแนวนอนและแนวตั้ง แนวตั้งค่าเริ่มต้น ไม่ว่าจะเป็นการถ่ายทอดสดหรือ H5 แบบเต็มหน้าจอ โดยทั่วไปจะเล่นในแนวตั้ง แต่แอตทริบิวต์นี้ต้องใช้ x5-video-player-type เพื่อเปิดใช้งานโหมด H5 -->

 <เล่นวิดีโออัตโนมัติ></วิดีโอ>

อย่างไรก็ตาม ในเบราว์เซอร์มือถือจำนวนมาก การดำเนินการจริงของผู้ใช้ (เหตุการณ์มาตรฐาน เช่น เหตุการณ์ touchend, คลิก, doubleclick หรือ keydown) จำเป็นต้องทริกเกอร์การเรียก video.play() เพื่อเล่นเสียงและวิดีโอโดยอัตโนมัติ

 dom.addEventListener ('คลิก' ฟังก์ชั่น () { video.play ()})

Video.play() สามารถเรียกได้ใน wx.ready()

 wx.ready (ฟังก์ชั่น () { video.play ()})

ตั้งค่าคุณสมบัติ webkit-playsinline playinline

 <video id=video webkit-playsinline playinline /></video>

เมื่อเล่นวิดีโอใน iOS Safari และเบราว์เซอร์ Android บางรุ่น วิดีโอจะไม่สามารถเล่นได้ในหน้า h5 และระบบจะเข้าควบคุมวิดีโอโดยอัตโนมัติ

หากคุณต้องการเล่นวิดีโอในหน้า h5 คุณต้องเพิ่ม webkit-playsinline ให้กับแท็กวิดีโอ หลังจาก iOS 10 คุณต้องเพิ่ม playinline ขอแนะนำให้เพิ่มแอตทริบิวต์ทั้งสองนี้พร้อมกัน แอพยังต้องรองรับโหมดนี้ด้วย

 webview.allowsInlineMediaPlayback = ใช่;

ทั้ง iOS Mobile QQ และ WeChat รองรับโหมดนี้ แต่ Android WeChat จะวางสาย

เบราว์เซอร์ในตัวของ Android WeChat ใช้เคอร์เนล Tencent X5 และไม่เป็นไปตามมาตรฐาน X5web หนึ่งในนั้นบังคับใช้วิดีโอแบบเต็มหน้าจอ หลังจากเล่นวิดีโอแล้ว วิดีโอแนะนำของ QQ จะปรากฏขึ้น

ว่ากันว่ามีไวท์ลิสต์และทรัพยากรวิดีโอในรายการไวท์ลิสต์จะไม่เต็มหน้าจอ แต่ Tencent ไม่สามารถเพิ่มลงในไวท์ลิสต์ได้อีกต่อไป ปัสสาวะไม่ออก ไม่มีวิธีแก้ปัญหา - - - - -

ขณะนี้มีวิธีแก้ไขคือใช้ h5 canvas เพื่อเล่นวิดีโอ

ข้อผิดพลาดที่พบเมื่อใช้ Canvas: วิดีโอต้องเพิ่มแอตทริบิวต์ x5-video-player-type=h5 ไม่เช่นนั้น วิดีโอจะค้างอยู่บนเทอร์มินัลมือถือและไม่สามารถเล่นได้ โดยส่วนตัวแล้ว ฉันคิดว่าเป็นเพราะวิดีโอถูกยึดครองแล้ว

 <div class=wrapper> <video id=video style=display: none เล่นอัตโนมัติ src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <script> var video = document.querySelector('#video') var canvas = document.querySelector('#canvas') var wrapper = canvas.parentNode var width = wrapper.offsetWidth var height = wrapper.offsetHeight var ctx = c.getContext ('2d') var time = null canvas.width = width canvas.height = ความสูง canvas.addEventListener ('คลิก', ฟังก์ชั่น () { video.play ( ) }) video.addEventListener('play', function () { time = window.setInterval(function () { ctx.drawImage(v, 0, 0, ความกว้าง, ความสูง); }, false); video.addEventListener('ended' , ฟังก์ชั่น () { window.clearInterval(time); }, false);</script>

ในที่สุดก็พบว่าแม้ว่าจะใช้ Canvas ในการเล่นวิดีโอ แต่วิดีโอที่แนะนำหลังจากเล่นวิดีโอแบบเต็มหน้าจอสามารถบล็อกได้ใน Android WeChat แต่ไม่มีวิธีปิดการใช้งานปัญหาเต็มหน้าจอเมื่อเล่นวิดีโอ ยังคงได้รับรายการขาวที่ชั่วร้าย ร้องเรียน. - - - - - - - - - - - - - - -

ที่น่ารำคาญยิ่งกว่านั้นคือฉันไม่พบวิธีทริกเกอร์การออกแบบเต็มหน้าจอผ่าน js

เมื่อเล่นวิดีโอบน iOS หน้าจอสีดำจะปรากฏขึ้นชั่วครู่จากนั้นจึงแสดงผลตามปกติ

สารละลาย:

เพิ่ม div เหนือวิดีโอและเติมรูปภาพเพื่อสร้างภาพเหมือนกำลังโหลดก่อนเล่น จากนั้นฟังเหตุการณ์ timeupdate และลบบล็อก div นี้ออกเมื่อวิดีโอกำลังเล่น

 video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){ posterImg.hidden(); }})

HTMLVideoElement และ HTMLAudioElement ทั้งคู่สืบทอดมาจาก HTMLMediaElement

 //ข้อผิดพลาดของสื่อ MediaObj.error; //null: ปกติ MediaObj.error.code; //1. การสิ้นสุดผู้ใช้ 2. ข้อผิดพลาดของเครือข่าย 3. ข้อผิดพลาดในการถอดรหัส 4. URL ไม่ถูกต้อง // สถานะปัจจุบันของสื่อ MediaObj.currentSrc; /กลับสู่ทรัพยากรปัจจุบัน URLMediaObj.src = value; //ส่งคืนหรือตั้งค่าทรัพยากรปัจจุบัน URLMediaObj.canPlayType(type); // ไม่ว่าทรัพยากรในรูปแบบใดจะสามารถเล่น MediaObj.networkState ได้ //0. องค์ประกอบนี้ไม่ได้เตรียมใช้งาน 1. ปกติ แต่ไม่ได้ใช้เครือข่าย 2. กำลังดาวน์โหลดข้อมูล 3. ไม่พบทรัพยากร MediaObj.load(); // รีโหลดทรัพยากรที่ระบุโดย src MediaObj.buffered; กลับไปที่พื้นที่บัฟเฟอร์ TimeRangesMediaObj.preload; //none: อย่าโหลดข้อมูลเมตาล่วงหน้า: โหลดข้อมูลทรัพยากรล่วงหน้า auto://ready state MediaObj.readyState; //1:HAVE_NOTHING //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; // ไม่ว่าจะเป็นการค้นหา//สถานะการเล่น MediaObj.currentTime = value; // ตำแหน่งการเล่นปัจจุบัน การกำหนดสามารถเปลี่ยนได้ ตำแหน่ง MediaObj .startTime; // โดยทั่วไป 0 หากเป็นการสตรีมสื่อหรือทรัพยากรที่ไม่ได้เริ่มต้นจาก 0 จะไม่ใช่ 0MediaObj.duration; // สตรีมความยาวทรัพยากรปัจจุบันส่งคืน MediaObj.paused แบบไม่มีที่สิ้นสุด // ไม่ว่าจะหยุดชั่วคราว MediaObj.defaultPlaybackRate = value หรือไม่ ; //ค่าเริ่มต้น สำหรับความเร็วในการเล่น คุณสามารถตั้งค่า MediaObj.playbackRate = value; // ความเร็วการเล่นปัจจุบัน ให้เปลี่ยนทันทีหลังจากตั้งค่า MediaObj.played; // ส่งคืนพื้นที่ที่เล่น TimeRanges ดูด้านล่างสำหรับวัตถุ MediaObj.seekable; // ไม่ว่าจะเล่น MediaObj โดยอัตโนมัติหรือไม่ .loop; //ใช่ เล่นวนซ้ำ MediaObj.play(); //เล่น MediaObj.pause(); //หยุดชั่วคราว//การควบคุมวิดีโอ MediaObj.controls;//มีแถบควบคุมเริ่มต้น MediaObj.volume = value; //Volume MediaObj.muted = value; //Mute//TimeRanges (region) object TimeRanges.length; /ภูมิภาค จำนวนกลุ่ม TimeRanges.start(index) //ตำแหน่งเริ่มต้นของพื้นที่ส่วนดัชนี TimeRanges.end(index) //ตำแหน่งสิ้นสุดของส่วนดัชนี //[★★★**เหตุการณ์ที่เกี่ยวข้อง**★★★]//การกระจายเหตุการณ์ var eventTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}//การตรวจสอบเหตุการณ์ eventTester(loadstart); // ลูกค้าเริ่มร้องขอข้อมูล eventTester(ความคืบหน้า); // ลูกค้ากำลังร้องขอข้อมูล eventTester (ระงับ); // การดาวน์โหลด eventTester ล่าช้า (ยกเลิก) // ลูกค้ายุติการดาวน์โหลดอย่างแข็งขัน (ไม่ได้เกิดจากข้อผิดพลาด) eventTester (loadstart); // ลูกค้าเริ่มร้องขอข้อมูล eventTester ( ความคืบหน้า); // ลูกค้ากำลังร้องขอข้อมูล eventTester (ระงับ); // การดาวน์โหลด eventTester ล่าช้า (ยกเลิก); // ลูกค้ายุติการดาวน์โหลดอย่างแข็งขัน (ไม่ใช่เนื่องจากข้อผิดพลาด), eventTester (ข้อผิดพลาด); // พบข้อผิดพลาดเมื่อร้องขอข้อมูล eventTester (จนตรอก); // ความเร็วเครือข่ายจนตรอก eventTester (เล่น); // EventTester (หยุดชั่วคราว) ถูกทริกเกอร์เมื่อเล่น () และเล่นอัตโนมัติเริ่มเล่น; // หยุดชั่วคราว () ทริกเกอร์ eventTester (loadedmetadata ); // ได้รับความยาวทรัพยากรแล้ว eventTester (โหลดข้อมูล); // eventTester (กำลังรอข้อมูล) ไม่ใช่ eventTester ที่ผิดพลาด (กำลังเล่น); //เริ่มเล่น eventTester(canplay); //สามารถเล่นได้ แต่อาจถูกหยุดชั่วคราวเนื่องจากการโหลด eventTester(canplaythrough); //สามารถเล่นได้, โหลดเพลงทั้งหมดแล้ว eventTester(กำลังค้นหา); / การค้นหา eventTester (การอัพเดตเวลา); // เวลาในการเล่นเปลี่ยนไป eventTester (สิ้นสุด); // การเล่นสิ้นสุด eventTester (อัตราการเปลี่ยนแปลง); // //การเปลี่ยนแปลงความยาวของทรัพยากร eventTester(volumechange); //การเปลี่ยนแปลงระดับเสียง

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network