亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

播放未加載的視頻時,視頻海報在 Chrome 中會被拉伸

播放未加載的視頻時,視頻海報在 Chrome 中會被拉伸

蕭十郎 2023-09-21 17:31:59
我遇到的情況是,設置的視頻object-fit: cover在嘗試播放視頻時其海報被拉伸。海報被拉伸到 2:1 的寬高比,我注意到video如果沒有應用樣式,這是默認標簽的默認比例。我無法在其他瀏覽器中重現,并且它似乎與 CSS 設置無關。重現的最小代碼如下所示:<!DOCTYPE html><html>    <head>        <meta charset="UTF-8" />        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        <title>Video Error Test</title>    </head>    <body>        <style>            video {                width: 300px;                height: 600px;                object-fit: cover;            }        </style>        <video poster="https://via.placeholder.com/300x600" muted>            <source src="not-important" type="video/mp4"/>        </video>    </body>    <script>        setTimeout(() => {            document.body.querySelector("video").play();        }, 1000);    </script></html>小提琴: https: //jsfiddle.net/6c7yjg8a/任何想法 ?
查看完整描述

1 回答

?
拉風的咖菲貓

TA貢獻1995條經驗 獲得超2個贊

最終添加了對視頻元素的 ReadyState 的檢查,如下所示:


if (video.readyState < 1) {

    video.addEventListener("loadedmetadata", video.play)

    video.load()

} else {

    video.play()

}

因此,play只有在加載元數據時才會觸發該命令,如果沒有加載,則會等待。顯然,通過元數據,大小調整可以正確完成


https://jsfiddle.net/9qjLtyho/


查看完整回答
反對 回復 2023-09-21
  • 1 回答
  • 0 關注
  • 127 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號