Vue播放本地视频

最新推荐文章于 2024-05-22 16:44:32 发布

weixin_46255873

最新推荐文章于 2024-05-22 16:44:32 发布

阅读量6.3k

点赞数 2

文章标签： vue.js 音视频 javascript

本文链接：https://blog.csdn.net/weixin_46255873/article/details/122826704

版权

用户可以选择本地文件，对视频进行播放，HTML代码如下：

<div>
    <input type="file" id="chooseFile" @change="chooseLocaleFile($event)">
    <video controls ref="videoDom" width="1600" height="650" autoplay></video>
</div>

js代码如下:

chooseLocaleFile(file){
    let files = document.getElementById("chooseFile").files[0];
    let url = window.webkitURL.createObjectURL(files) ;
    this.$refs.videoDom.src = url;
}

video 标签属性及其含义参照：HTML <video> 标签

autoplay	如果出现该属性，则视频在就绪后马上播放
controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	如果出现该属性，则当媒介文件完成播放后再次开始播放
muted	规定视频的音频输出应该被静音
poster	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性
src	要播放视频的url
width	视频所占页面宽度大小
height	视频所占页面高度大小