MP4视频在网页中无法播放的情况解决方法
MP4视频在网页上播放
我们遇到过很多朋友,在制作网站的时候都会放上一个视频用以介绍公司信息或者产品,如果使用优酷土豆等第三方视频媒体的视频外链服务的话,会有较长的广告,这样对于我们的视频播放造成一定的影响。
那么我们一般建议大家直接上传一个mp4 视频到媒体库,或者上传到七牛云进行播放,这样就避免了广告的问题。
这里有一个教程是将视频托管于七牛云进行播放的:利用七牛云储存在网页上播放无广告的视频
大家可以观看,将视频托管于七牛云适用于只有一两个视频,也就是视频较少的情况下,七牛的免费流量完全可以能够满足播放(如果你是专门的视频网站,在免费的每月20G超过之后,那么可以进行购买七牛的流量了。)
七牛上存储视频一个是不会将自己服务器的带宽影响,另一个速度更快,除了七牛云还有阿里云的oss视频托管付费服务等可以使用,当然这些服务是应用在视频较多的网站上。
视频编码格式不正确导致MP4视频在网页上无法播放
MP4视频在网页html中只支持H.264的编码格式,如果你生成的视频编码格式不正确,那么就无法进行播放,每一个浏览器对于视频的无法播放的提示略有不同。
有的浏览器只出现一个进度条,而视频无法播放。
有的浏览器直接提示,无法支持当前视频的格式。
因此,在上传视频之前,你需要查看下你的视频是否符合要求的编码,如果你不知道如何查看,可以直接在本地电脑上将视频拖拽进入你的浏览器(360极速模式、火狐、谷歌等等都支持拖入直接播放)
如果视频能再浏览器中直接播放,那么视频就可以被网页支持,反之则是不能的,你需要使用格式工厂等软件,将不能播放的视频转码到H.264的编码格式,生成新的视频。
MP4视频放入网页的方法
WEB主题公园的wordpress主题一般提供视频代码框给你,以便于让各种类型的视频可以输出。
放入MP4视频需要我们使用video标签,也就是如下代码:
<video src=“你的视频地址 controls=“controls” width=“宽度” height=“高度”></video>
而video标签有一些参数需要你来了解:
autoplay :出现该属性意味着视频在就绪后将自动播放,用法:autoplay=”autoplay”
controls :出现该属性意味着向用户显示控件,如播放按钮等,用法:controls=”controls”
height:设置高度
width:设置宽度
loop:自动重播,用法:loop=”loop”
preload:视频在页面加载时进行加载并预备播放,用法:preload=”auto” – 当页面加载后载入整个视频;preload=”meta” – 当页面加载后只载入元数据;preload=”none” – 当页面加载后不载入视频。注意:若使用了autoplay,则忽略preload
src:要播放视频的url
一般来说,主题会强制视频大小,以便适应所有尺寸的设备浏览,但是如果没有强制的话,你可以将宽度设为100%,高度设为300~500均可。
(资源库 www.zyku.net)
上一篇:把其他格式的视频转换成H.264编码的MP4视频的方法
栏 目:工具资源
下一篇:TortoiseSVN checkout 之后图标(绿色勾之类的)没有显示出来的问题
本文标题:MP4视频在网页中无法播放的情况解决方法
本文地址:https://www.zyku.net/gongju/1745.html
您可能感兴趣的文章
- 12-09把其他格式的视频转换成H.264编码的MP4视频的方法
- 01-19花藤字体网名-花藤字体网名应用软件功
- 11-12网易云音乐在哪看歌曲播放次数
- 03-02iPone12敲击两下手机截屏操作方法
- 02-16华为手机开启流量通知方法
- 09-19交管12123电子驾驶证获取随机数异常解
- 01-08小米12关闭ai电话助理方法
- 04-05Ajax验证用户名或昵称是否已被注册
- 12-25布谷健康-布谷健康应用软件功能介绍
- 11-10iphone就寝闹钟删除步骤介绍
- 11-02使用 Cloudflare的CDN 来缓存音频和视
- 02-23DedeCms 5.5 列表页调用tag的方法
- 10-29网易云音乐博客偏好在哪里设置
- 04-02iqooneo5护眼模式设置方法
- 11-06Linux系统下网站80端口公网无法访问
- 10-20苹果13怎样启用一键锁屏
- 09-27oppo手机如何开启家人共享
- 06-15Windows Server 2016 禁止系统自动更
- 09-27微信iOS8.0.14更新了什么
- 12-26潮牌玩家-潮牌玩家应用软件功能介绍
最近更新
阅读排行
猜你喜欢
- 01-11冲吖学校-冲吖学校应用软件功能介绍
- 02-23真我V13微信视频通话开启美颜教程
- 09-16腾讯视频在哪里修改房间名
- 12-17华为nova5怎么设置杂志锁屏
- 02-06opporeno5自定义铃声设置方法
- 08-15tinytask录制键盘动作教程介绍
- 01-16云天换电-云天换电应用软件功能介绍
- 02-06oppo手机调整应用启动动画速度方法
- 01-08护考在线-护考在线应用软件功能介绍
- 07-05Linux bzip2recover命令