<!-- 在模板中使用 video 标签,并绑定 loadedmetadata 事件到 onVideoLoaded 方法 -->
<video :style="videoStyle" @loadedmetadata="onVideoLoaded" :show-center-play-btn="false" id="myVideo" :src="infolist.vedio" @error="videoErrorCallback" controls></video>
export default {
data() {
return {
videoStyle: '', // 用于保存视频样式的字符串
infolist: {
vedio: '视频地址' // 视频地址需要根据实际情况填写
}
};
},
methods: {
// 当视频加载元数据时触发的事件处理函数
onVideoLoaded(event) {
// 计算视频实际高度,并将样式字符串保存到 videoStyle 中
this.videoStyle = `height: ${750 * (event.target.videoHeight / event.target.videoWidth)}rpx; width: 750rpx;`;
},
// 当视频加载出错时触发的事件处理函数
videoErrorCallback(event) {
// 可以在这里处理视频加载出错的情况
}
}
};