MP4文件使用video标签前端不能播放

如果使用HTML的video标签,有视频但是无法播放视频,有以下几种原因:

1.视频地址不正确

注意,地址分为绝对地址和相对地址。

绝对地址:比如C:\Users\1\Desktop\科研开发实践\bike1sot2.mp4。

<video controls="controls" loop="loop">
  <source src="C:\Users\1\Desktop\科研开发实践\bike1sot2.mp4" type="video/mp4">
您的浏览器不支持 HTML5 标签
</video>

相对地址:比如./bike1sot2.mp4,./代表对于你的HTML文件的当前目录,相当于html文件的邻居。所以MP4文件和html文件要在同一个文件夹下。

<video controls>
  <source src="./bike1sot2.mp4" type="video/mp4">
  您的浏览器不支持 HTML5 视频标签。
</video>

 检查你的地址是否正确。

2.MP4视频格式不正确

是的,MP4还有多种格式,是视频编码器的锅。

只有h264编码的视频才能被HTML的video标签识别。

解决方法:视频文件转换器在线视频转换器 (online-convert.com)

 在浏览器搜索online-convert,选择转换MP4,视频编解码器选择h264型,然后下载转换好的视频,更改你的HTML代码。

3.上传视频到web服务器,然后调取

简单直接,发布视频到哔哩哔哩,然后在视频页面分享处,点击嵌入代码,然后就可以得到 <iframe>标签的代码。

<iframe src="//player.bilibili.com/player.html?aid=964565977&bvid=BV1CH4y1k761&cid=1362206760&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

使用这个替代video标签的代码。

### HTML5 `video` 标签实现视频倍速播放 HTML5中的`<video>`标签提供了丰富的属性和方法来控制多媒体文件播放行为,其中包括调整播放速度的功能。通过设置`playbackRate`属性,可以轻松更改视频回放的速度。 #### 使用 `playbackRate` 属性进行倍速播放 `playbackRate`是一个浮点数类型的属性,默认值为1.0表示正常速度播放;大于1则加速播放,小于1会减速播放。例如: ```javascript document.querySelector('video').playbackRate = 2; // 设置两倍速播放 ``` 此代码片段选择了页面上的第一个`<video>`元素并将其播放速率设为了默认速度的两倍[^2]。 #### 完整实例展示 下面给出一个完整的HTML文档例子,其中包含了可交互式的按钮用于切换不同的播放速度: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Video Playback Rate Example</title> </head> <body> <!-- Video element --> <video id="myVideo" controls width="640" height="360"> <source src="your-video-file.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <!-- Buttons to change playback rate --> <div style="margin-top:20px;"> <button onclick="setPlaybackRate(0.5)">0.5x</button> <button onclick="setPlaybackRate(1)">Normal (1x)</button> <button onclick="setPlaybackRate(1.5)">1.5x</button> <button onclick="setPlaybackRate(2)">2x</button> </div> <script> function setPlaybackRate(rate){ document.getElementById('myVideo').playbackRate = rate; } </script> </body> </html> ``` 上述代码创建了一个带有控件(如播放/暂停)以及预定义尺寸大小的视频播放器,并提供了一组按钮让用户能够方便地选择不同级别的播放速度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值