美文网首页
upload文件拦截上传视频的分辨率

upload文件拦截上传视频的分辨率

作者: 哼_ | 来源:发表于2024-03-27 09:38 被阅读0次

在 before Upload方法里面判断视频的格式

 // 获取视频
            window.URL = window.URL || window.webkitURL;
            let url = URL.createObjectURL(file);
            let audioElement = document.createElement('video');
            audioElement.src = url;
            let duration;
            audioElement.addEventListener('loadedmetadata', function (_event) {
                duration = parseInt(duration);
                
                if (audioElement.videoWidth != 1920 || audioElement.videoHeight != 1080) {
                    ElMessage({
                        message: `请上传1920*1080分辨率视频!`,
                        grouping: true,
                        type: 'error',
                    });
                    ossState.ossClient.cancel(); // 阿里云取消上传
                    // return reject(false);
                }
            });

如果上传视频, 支持m3u8视频格式
需要引入video.js 插件, 播放视频格式

在动态修改url 的时候, 修改src
 <video
                ref="videoPlayer"
                class="video-js vjs-default-skin video-box"
                controls 
            ></video>



videoCom = videojs(
                videoPlayer.value,
                {
                    controls: true, // 显示控制条
                    sources: [
                        {
                            type: 'application/x-mpegURL',
                            src: '', // 替换为你的m3u8文件地址
                        },
                    ],
                },
                function onPlayerReady(data) {
                    videoCom.play(); // 在播放器准备好后播放视频
                }
            );
            videoCom.src(file.url);

相关文章

网友评论

      本文标题:upload文件拦截上传视频的分辨率

      本文链接:https://www.haomeiwen.com/subject/jcbstjtx.html