จะเปลี่ยนความกว้างของ video.js ในการเปลี่ยนการวางแนวได้อย่างไร

ฉันมีวิดีโอ N จำนวน ฉันเล่นวิดีโอทั้งหมดผ่านเฟรมเวิร์กโปรแกรมเล่น video.js

ฉันตั้งค่าความกว้างของ videoPlayer โดยใช้ javascript

ความกว้างของวิดีโอแรกตั้งค่าอย่างถูกต้องทั้งในโหมดแนวตั้งและแนวนอน แต่วิดีโอถัดไปตั้งค่าไม่ถูกต้องในโหมดแนวนอน

นี่คือ player.html ของฉัน

<video  id="cdnvideo" class="video-js fullscreen vjs-default-skin vjs-big-play-centered" controls preload="auto"
  poster="{{video|videourlfilter}}"  >
<source   src="{{video|videourlfilter}}" type='video/mp4'>    
<source   src="{{video|videourlfilter}}"".mp4" type='video/mp4'>
</video>  

My js

 vidPlayer = videojs(document.getElementById('cdnvideo'))
    vidPlayer.width(screen.width)
  $(window).on("orientationchange", function (event) {   
     if(screen.width > screen.height){
         vidPlayer.width(height)
     }
         else{
             vidPlayer.width(width)
         }
});

person akash    schedule 21.05.2018    source แหล่งที่มา
comment
นี่คือการเขียนโค้ดของคำถามที่คล้ายกัน...มันช่วยได้ไหม? stackoverflow.com/questions/5284878 นอกจากนี้ โปรดระบุแพลตฟอร์มมือถือที่คุณกำหนดเป้าหมายเมื่อคุณทดสอบ   -  person Dave    schedule 21.05.2018
comment
ฉันสังเกตเห็นว่าไวยากรณ์ของแอตทริบิวต์ src ของแท็กแหล่งที่มาที่ 2 ดูแปลก กล่าวคือ เครื่องหมายคำพูดคู่สองตัวที่อยู่ติดกันดูน่าสงสัย และไม่สมมาตรกับแท็กแหล่งที่มาแรก   -  person Dave    schedule 21.05.2018
comment
สุดท้ายนี้ javascript เองก็ไม่สามารถแยกวิเคราะห์ได้อย่างถูกต้อง คำแนะนำ: เช่น บนเบราว์เซอร์ Chrome ให้ไปที่ '3 จุดแนวตั้ง' -› เครื่องมือเพิ่มเติม -> เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ซึ่งจะเปิดใช้งาน 'คอนโซล' การแก้ไขข้อบกพร่องในครึ่งขวาของหน้าจอ   -  person Dave    schedule 21.05.2018
comment
ฉันขอโทษอย่างจริงใจ...ตอนนี้คืนนี้ JS ของคุณแยกวิเคราะห์ได้ (และเทมเพลตของคุณบนซอร์สแท็กที่ 2 ไม่ต้องสงสัยเลยว่าจะไม่แสดงแบ็กสแลช เนื่องจากการตัด/วางหรืออะไรก็ตาม) แต่ฉันได้เรียนรู้ไปมากมายแล้ว ดังนั้นฉันจะลองอีกครั้ง คุณอาจพบข้อบกพร่องใน video-js เพื่อที่จะพยายามสร้างมันขึ้นมาใหม่ ยังไม่ชัดเจนว่าคุณจะเปลี่ยนแปลงแท็กแหล่งที่มาใดในสองแท็กที่จะใช้ในการทดสอบของคุณ คุณเพียงแค่สลับลำดับของมันในการวิ่งต่อเนื่องกันหรือไม่? หรืออย่างอื่น?   -  person Dave    schedule 22.05.2018


คำตอบ (1)


ไม่ ฉันถูกต้องในครั้งแรก...JS ของคุณแยกวิเคราะห์ไม่ถูกต้อง

(ฉันลืมไปว่ารหัส JS เดียวที่ได้รับการแยกวิเคราะห์คือรหัสที่ได้รับการ EXECUTED! ดังนั้น รหัสเหตุการณ์จะไม่ถูกแยกวิเคราะห์บนแล็ปท็อป Win-10 ของฉัน...มันจะแยกวิเคราะห์เฉพาะเมื่ออุปกรณ์มือถือได้รับการหมุนจริงเท่านั้น )

ดังนั้น 'sets' แบบมีเงื่อนไขสองเงื่อนไขของคุณจะไม่แยกวิเคราะห์...นั่นคือ อันแรกได้รับ: "Uncaught ReferenceError: ไม่ได้กำหนดความสูง"

คุณจะต้องเพิ่ม 'หน้าจอ' ถึงข้อโต้แย้งของคุณ เช่น. vidPlayer.width (หน้าจอความสูง)

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

อย่างไรก็ตาม ขอบคุณสำหรับคำถามของคุณ...ฉันได้เรียนรู้มากมายจากการเล่นกับมัน ฉันยังได้ทบทวน 'เทมเพลต' ของ JS เมื่อฉันสแกน https://www.joezimjs.com/javascript/javascript-templating-adding-html-the-right-way/ (ฉันเล่นกับ Angular เพียงหนึ่งหรือสองเดือนก่อนที่จะตัดสินใจว่า เกินความจำเป็นสำหรับ 'เว็บแอปเป็นงานอดิเรก' ของฉัน สิ่งเดียวที่ฉันต้องแสดงคือม้าหมุนหลายรายการ...เช่น https://mdbootstrap.com/angular/advanced/ม้าหมุน/ )

ไชโย...

person Dave    schedule 22.05.2018