美文网首页
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