在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ canvas做視頻截圖，怎么保證圖片和video播放窗口盡量一樣大。

canvas做視頻截圖，怎么保證圖片和video播放窗口盡量一樣大。

我要實(shí)現(xiàn)的是圖片不能變形，因?yàn)樾枨髮@個截的圖片要求很高，所以圖片必須和視頻畫面一樣比例。

原因分析：canvas畫圖利用drawImage實(shí)現(xiàn)，但是drawImage這個api的參數(shù)比較坑人的就是當(dāng)繪制的是，是視頻畫面時，是根據(jù)視頻的實(shí)際幀寬高來繪制的，但是每個視頻的實(shí)際幀寬高不一樣，但是播放視頻的video標(biāo)簽窗口是固定大小，所以利用等比例縮放公式計(jì)算出截的圖片大小時，導(dǎo)致有些視頻截的圖片大小遠(yuǎn)遠(yuǎn)小于video標(biāo)簽的播放窗口

回答
編輯回答
薄荷糖

你可以這樣試試：

<div class="wrapper">
    <div class="video-box">
        <video id="video"></video>
    </div>
</div>

.wrapper{
    position: relative;
    width: 600px;
    height: 480px;
}
.video-box{
    position: absolute;
    width: 100%;
    left : 0%;
    top: 50%;
    transform: translate(0%,-50%);
    background: #000;
}
#video{
    position: relative;
    display: block;
    max-width: 100%;
    height: auto;
}

var src= "1.mp4",
    video = document.getElementById("video");

video.ondurationchange = function(){
    alert(video.width,video.height); //這里應(yīng)該就是視頻等比縮放后的實(shí)際幀寬高了
};
  
video.src = src;
2017年9月13日 21:07