H5的vedio标签mp4格式有声音无画面

业务场景:
上传视频(mp4格式)到linux后,能听到声音,但是看不到画面。

在这里插入图片描述
在这里插入图片描述
解决方案:
上传了个mp4格式的,但是视频编码是mpeg-4,这个目前html5的vedio标签解析不出画面来。目前用的浏览器默认播放器无法解析mp4的所有格式。
使用格式工厂把视频转换成AVC(H264)编码格式即可。

1)查看视频编码格式:格式工厂——多媒体文件信息——选择视频文件,即可查看该视频详细信息,如下图:
在这里插入图片描述
2)转换成AVC(H264)编码格式
格式工厂——MP4——添加文件——输出配置,如下图:
在这里插入图片描述

转换后效果展示:
在这里插入图片描述

### 解决方案 为了确保 HTML5 `video` 标签能够正确显示视频的第一帧图像,可以采用多种方法来实现这一目标。 #### 方法一:使用 poster 属性 通过设置 `poster` 属性,可以直接指定一张图片作为视频播放前的预览图。这不仅可以让用户提前看到视频的内容,还能提升页面加载速度和用户体验[^1]。 ```html <video controls poster="path_to_image.jpg"> <source src="movie.mp4" type="video/mp4"> </video> ``` #### 方法二:监听 loadedmetadata 事件并利用 canvas 绘制第一帧 另一种方式是在 JavaScript 中监听 `loadedmetadata` 事件,在该事件触发后立即获取当前时间点的画面并通过 `<canvas>` 元素绘制出来。这种方法适用于动态生成缩略图的情况[^2]。 ```javascript const videoElement = document.querySelector('video'); videoElement.addEventListener('loadedmetadata', () => { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); // 设置画布大小等于视频尺寸 canvas.width = videoElement.videoWidth; canvas.height = videoElement.videoHeight; // 将视频当前帧绘制成图像 context.drawImage(videoElement, 0, 0); // 可选操作:将 canvas 转换成 base64 编码的数据 URL 或者保存为文件 }); ``` #### 方法三:点击按钮时显示视频 如果希望在特定条件下才展示视频内容,则可以在初始状态下隐藏实际的 `video` 元素,并放置一个占位符(如静态图片)。当用户交互发生(比如点击某个按钮),则切换到真实的媒体控件上[^3]。 ```html <!-- 初始状态 --> <img id="placeholder-image" src="thumbnail.png" alt="Video thumbnail"> <button id="play-video">Play Video</button> <!-- 实际视频元素,默认不可见 --> <video id="actual-video" style="display:none;" controls></video> <script> document.getElementById("play-video").addEventListener('click', function() { var imgPlaceholder = document.getElementById("placeholder-image"); var vidPlayer = document.getElementById("actual-video"); // 替换掉原来的图片位置为视频播放器 imgPlaceholder.style.display = "none"; vidPlayer.src = "your_video_file.mp4"; // 加载视频源 vidPlayer.play(); // 开始播放 }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瓜仙人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值