微信小程序播放编码为 video/mp4；codecs=vp8 opus 的视频没有声音

于 2024-04-28 22:04:30 发布
阅读量1.1k 收藏
点赞数 1
文章标签： 微信小程序 vp8 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43191327/article/details/138292479
版权

最近在做浏览器录屏功能，主要是录屏加上麦克风生成mp4视频，最终生成的是编码为 video/mp4;codecs=vp8 opus 的视频，音频编码因为是 opus 是无法在小程序正常播放的，这样就导致了视频没有声音。后来就在服务端做了一层转换，将音频的 opus 转为了 AAC 编码，这样在小程序端就可以正常播放了。转换是通过 FFmpeg 转换的，但是转换的时候因为视频编码为 vp8，转换为 AAL 就造成转换时间很长，所以需要设置为 video/mp4;codecs=h264 然后后端把数据转为 AAL 就行了。时间大幅度缩减了。

MediaRecorder(strem, {
 mimeType: 'video/mp4;codecs=h264'
})

在chrome里面，音频编码默认就是 opus。如果设置为mimeType: 'video/mp4;codecs=h264 opus' 就会报错。只设置视频编码就好。如果你打印出来的blob数据不是这个编码格式也不用担心，将保存的视频文件放在工具里面查看就好。因为打印出来的是不对的。工具： mediainfo

是阿臻
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
包含opus和vp8的webm视频文件
11-07
一段测试视频，音频编码格式为opus，视频编码格式为vp8，封装格式为webm，其中视频内容涉及分辨率变化和转场等测试点。
使用Jave转换音视频格式（网页有声音没图像，小程序不能播放问题）
neilhan19861024的博客
03-16 1152
小程序的video标签API说是支持H264格式。经过测试，发现实际支持H264（Main），不支持H264（High）。H264 （Main）可以正常播放，但H264（High）不行。用户上传不能正常播放的mp4文件编码格式为 hevc，即H.265格式。用户在PC后端上传的mp4格式的视频文件，在PC端只有声音没有图像，在小程序端完全不能播放。可以看到文件已经转换成h264 (Main) 格式，这种格式可以兼容PC网页和小程序。如果是h264 (High)，则小程序端不能播放，PC页面可以正常播放。
小程序video标签在（华为手机）无法播放.mp4长视频（ios上正常）
weixin_61877032的博客
03-02 3148
微信小程序video标签在（华为手机）无法播放.mp4长视频（ios上正常）
移动端实现HTML5 mp3录音踩坑指南：系统播放音量变小、一些机型录音断断续续 之 MediaRecorder和AudioWorklet的终极对决
高坚果兄弟
08-14 1700
Recorder H5录音开源库群里有用户反馈手机上录音有bug，前后反馈过来几段测试过程完整录像；分析后初步发现在他那个手机上表现确实是断断续续的，从而音质非常差；此版本的Recorder采用的浏览器或接口对。但用另外一个录音库录制的却没有这个问题，当时初步分析了下一，发现在手机上使用的是来录制webm格式音频，底层使用的是浏览器的接口对返回的音频流进行音频采集。......
【音】MediaRecorder支持录制类型情况
点滴
03-19 4647
最近有有需求，需要捕获用户的脸部表情以及上课的表现情况， 用于提供给AI部门进行算法练习，研究了一下mediaRecorder 录制stream video/webm video/webm;codecs=vp8 video/webm;codecs=vp9 video/webm;codecs=vp8.0 video/webm;codecs=vp9.0 video/webm;codecs=h264 ...
webRTC学习系列之——WebRTC录制媒体流并下载
qq_42842692的博客
11-01 1362
本系列将会记录学习webRTC的过程
video标签
岁末zzz的博客
10-22 666
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video> autopl...
WebRTC-video_codecs视频编解码
bingshanzhu的专栏
09-14 7103
目录 VideoCodec VideoEncoder VideoEncoderFactory VideoDecoder VideoDecoderFactory VideoCodec VideoCodec //视频编解码信息 编解码器类型. 负载类型 宽高 码率 帧率 Qp(量化参数) 联播流 空间分级层 编解码器特性(VP8、vp9、h264) VideoCodec->VideoCo...
视频webm怎么转换成mp4
11-23 372
视频webm怎么转换成mp4？所以在这里就给大家简单的介绍一款比较不错的视频格式转换，支持将webm格式转换成mp4，请看详细步骤~
mp4转换html5,html5-video – VLC：如何从mp4转换为webm
weixin_36337548的博客
05-31 319
我会将该代码更改为：原因：poster="/path/to/your/thumbnail/image.jpg"因为您想在用户播放视频之前要显示“缩略图” BEFORE mp4在开放格式(如webm或therora)之前，因为有一些iOS版本中出现错误，如果mp4是在html中的任何其他格式(首先列出)后列出的，则不会播放视频。preload="Meta"因为某些版本的iOS甚至某些版本的Safar...
本示例演示使用 MediaRecorder 录音
06-15
本示例演示 使用 MediaRecorder 录音 详情请参见: http://blog.csdn.net/aduovip/article/details/6722949
MediaRecorder录制视频和语音
05-26
使用MediaRecorder简单实现视频的录制和音频的录制，代码中注释了比较容易出现的错误
微信小程序语音文件实例
09-05
微信小程序silk语音文件实例,用作语音识别，转码操作等
在线js视频格式转换截图翻转编辑ffmpeg等操作
weixin_43708218的博客
01-16 2290
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>videoconverter.js - 浏览器视频转换</title> <style type="text/css"> #terminal { background: #fff...
h5录制视频 MP4_h264编码
口袋的天空的博客
08-11 1361
<template> <div class="main "> <div class="left"> <div class="vedio"> <div class="shexiang"> <!--图片展示--> <video ref="video" width="350px" height="265px" autoplay></video&gt
ffmpeg实现web在线转码播放
最新发布
yinshipin007的博客
07-15 1202
Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看。前提： 公司项目中上传的视频编码格式不一，但是在浏览器播放中，却出现了黑屏（有声音）的情况，即使是MP4格式的视频，也存在无法播放，查询一番，了解到chrome浏览器的video标签仅对部分格式的视频支持播放通常我们使用MP4格式，但是MP4又分为“1.”、“2.”、“3.AVC(H264)”三种类型。其中只有H264类型的视频才能进行html播放MP4MPEG 4文件使用H264视频编解码器和AAC音频编解码器WebM。
JavaScript基于MediaRecorder录制mp4视频或webm视频并下载，JavaScript实现对video标签进行录制mp4视频或webm视频和下载
eguid音视频技术分享（JavaCV教程、FFmpeg教程、openCV图像处理教程、音视频教程）
04-17 2132
本章实现网页video标签录制mp4视频或webm视频并下载。视频录制这种计算密集型任务比较重，比较适合放在后台进行实现，本章适合前端任务不太重的短时间视频录制，长时间录制建议还是走后台录制并提供下载地址给网页前端即可。所以本章只适用于短时间的视频录制并下载，录制时间太长的视频会导致浏览器卡死、变慢等问题。前面已经实现了视频截图》的功能，需要对视频进行截图功能的可以参考。几个问题解答：需要注意的是video/mp4和video/mp4;
java mp4转码 h264_碎片化学习之--10分钟学会Jave视频转码avi-->mp4（h264编码格式）！...
weixin_32808905的博客
02-16 823
前提：1.maven工程一个2.avi视频一个第一步：通过pom.xml导入jave相关包ws.schildjave-core2.4.5ws.schildjave-native-win642.4.5第二步：示例：File source = new File("d://123.avi"); //源avi格式视频File target = new File("d://456.mp4");　　//转换...
springboot+websocket如何接收太大Blob类型为video/webm;codecs=vp8,opus ,利用@ServerEndpoint
05-16
在使用 Spring Boot + WebSocket 接收大 Blob 类型为 video/webm;codecs=vp8,opus 的视频数据时，可以使用以下步骤： 1. 在 Spring Boot 项目中创建一个 WebSocket 服务端点（@ServerEndpoint）。 2. 使用 WebSocket 的 Session 对象获取客户端发送的视频数据。 3. 将视频数据转换为字节数组，然后将其存储到文件或数据库中。 下面是一个示例代码： ```java @ServerEndpoint("/video") public class VideoEndpoint { @OnMessage public void onMessage(Session session, InputStream inputStream) throws IOException { ByteArrayOutputStream outputStream = new ByteArrayOutputStream(); byte[] buffer = new byte[1024]; int length; while ((length = inputStream.read(buffer)) != -1) { outputStream.write(buffer, 0, length); } byte[] data = outputStream.toByteArray(); saveVideo(data); } private void saveVideo(byte[] data) { // 存储视频数据到文件或数据库中 } } ``` 在客户端发送视频数据时，可以使用 JavaScript 的 Blob 对象将视频文件转换为 Blob 类型，然后通过 WebSocket 发送给服务端： ```javascript var video = document.getElementById("video"); var file = video.files[0]; var reader = new FileReader(); reader.onload = function() { var data = reader.result; var blob = new Blob([data], { type: "video/webm;codecs=vp8,opus" }); var socket = new WebSocket("ws://localhost:8080/video"); socket.binaryType = "arraybuffer"; socket.onopen = function() { socket.send(blob); }; }; reader.readAsArrayBuffer(file); ``` 需要注意的是，由于 WebSocket 传输的数据类型为二进制数据，因此需要将 Blob 对象转换为字节数组，然后在服务端进行解析和存储。同时，需要在客户端指定 WebSocket 的 binaryType 属性为 "arraybuffer"，以便正确地接收二进制数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值