Vue登錄主頁動態(tài)背景短視頻制作
本文實例為大家分享了Vue制作登錄主頁動態(tài)背景短視頻的具體代碼，供大家參考，具體內(nèi)容如下
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了華坪免費建站歡迎大家使用！
一、HTML代碼
注：src的路徑根據(jù)自己的需要改變；
video標簽無法自動播放 刷新后無法自動播放；
解決方法：給video標簽添加muted屬性，可寫為muted或完整寫法：muted=“muted”
二、css代碼
三、JavaScript----代碼
name： ' *** ' 自定義
export default {
name: 'Video',
data() {
return {
vedioCanPlay: false,
fixStyle: ''
}
},
methods: {
canplay() {
this.vedioCanPlay = true
}
},
mounted: function() { //屏幕自適應(yīng)
window.onresize = () => {
const windowWidth = document.body.clientWidth
const windowHeight = document.body.clientHeight
const windowAspectRatio = windowHeight / windowWidth
let videoWidth
let videoHeight
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth
videoHeight = videoWidth * 0.5625
this.fixStyle = {
height: windowWidth * 0.5625 + 'px',
width: windowWidth + 'px',
'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
'margin-left': 'initial'
}
} else {
videoHeight = windowHeight
videoWidth = videoHeight / 0.5625
this.fixStyle = {
height: windowHeight + 'px',
width: windowHeight / 0.5625 + 'px',
'margin-left': (windowWidth - videoWidth) / 2 + 'px',
'margin-bottom': 'initial'
}
}
}
window.onresize()
}
}四、效果演示
由于上傳大小限制，只能剪短的gif動畫了。
五、HTML版
視頻呢下載和html版代碼在官網(wǎng)最下方：https://coverr.co
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站標題：Vue登錄主頁動態(tài)背景短視頻制作
路徑分享：http://www.jiaotiyi.com/article/ppehhs.html