阿里雲OSS上傳視訊前端只能聲音沒有影像(黑屏)解決辦法

qq_33977511發表於2020-10-22

阿里雲OSS上傳視訊前端只能聲音沒有影像(黑屏)解決辦法

原因

今天前端開發告訴上傳圖片發現視訊只有聲音沒有影像,讓他發視訊給我上傳一遍發現有聲音有影像,情況如下圖,在postman中視訊可播放,但是沒有畫面
在這裡插入圖片描述
最後在阿里雲的這篇文件裡找到問題的原因:
問題在於視訊編碼格式的問題,視訊檔案為MPEG4或HEVC等格式(H.265編碼),常見的Web瀏覽器暫不相容該編碼的視訊檔案

前端發給我的時候,微信已經經過一遍壓縮轉碼(發過來給我時檔案小了很多,一開始以為是檔案大小的問題),所以上傳後有影像有聲音。

解決辦法

只需要將視訊轉碼為H.264編碼即可。
pom配置

		<!-- windows使用這個座標 -->
<!--        <dependency>-->
<!--            <groupId>ws.schild</groupId>-->
<!--            <artifactId>jave-native-win64</artifactId>-->
<!--            <version>2.4.5</version>-->
<!--        </dependency>-->
        <!-- osx使用這個座標 -->
<!--        <dependency>-->
<!--            <groupId>ws.schild</groupId>-->
<!--            <artifactId>jave-native-osx64</artifactId>-->
<!--            <version>2.4.4</version>-->
<!--        </dependency>-->
        <!-- linux使用這個座標 -->
        <dependency>
            <groupId>ws.schild</groupId>
            <artifactId>jave-native-linux64</artifactId>
            <version>2.4.4</version>
        </dependency>

java程式碼

// 上傳的檔案
File tempFile = File.createTempFile(UUID.randomUUID().toString(), suffix);
// 將前端上傳的MultipartFile轉為File
multipartFile.transferTo(tempFile);
// 如果是視訊需要轉碼的檔案
File file = File.createTempFile(UUID.randomUUID().toString(), suffix);
// TODO 根據你的邏輯來判斷檔案是不是視訊
AudioAttributes audio = new AudioAttributes();
// 音訊編碼格式
audio.setCodec("libmp3lame");
audio.setBitRate(800000);
audio.setChannels(1);
VideoAttributes video = new VideoAttributes();
// 編碼格式
video.setCodec("libx264");
video.setBitRate(3200000);
// 幀率
video.setFrameRate(15);
EncodingAttributes attrs = new EncodingAttributes();
attrs.setFormat("mp4");
// 設定音訊
attrs.setAudioAttributes(audio);
// 設定視訊畫面
attrs.setVideoAttributes(video);
Encoder encoder = new Encoder();

MultimediaObject multimediaObject = new MultimediaObject(tempFile);
encoder.encode(multimediaObject, file, attrs);
// 上傳到阿里雲OSS
String url = ossUtil.upload(FileTypeEnum.IMAGE, file);
// 刪除臨時檔案
tempFile.delete();
file.delete();
// 返回url
return url;

結果

postman預覽,可以正常顯示視訊影像
在這裡插入圖片描述
如果分片上傳,postman顯示結果是下面的結果,設定ContentType即可預覽
在這裡插入圖片描述
java程式碼

// 獲取檔案型別
String type = Files.probeContentType(file.toPath());
ObjectMetadata metadata = newObjectMetadata();
metadata.setContentType(type);
// 非分片上傳使用
// PutObjectRequest request = new PutObjectRequest(bucketName, fileUrl, file, metadata)
// 分片上傳使用
InitiateMultipartUploadRequest request = new InitiateMultipartUploadRequest(bucketName, fileUrl, metadata);

總結

因為看還看到別人寫過OSS無法顯示影像解決辦法,所以寫給碰到這個問題的人,希望大家少走彎路,拿更多時間去學習工作,謝謝觀看!

相關文章