MP4视频在网页中无法播放的情况解决方式

WordPress技术博客wp应用技术网站模板常见问题

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标签有一些参数需要你来了解:

 

  1. autoplay :出现该属性意味着视频在就绪后将自动播放,用法:autoplay=”autoplay”
  2. controls :出现该属性意味着向用户显示控件,如播放按钮等,用法:controls=”controls”
  3. height:设置高度      width:设置宽度
  4. loop:自动重播,用法:loop=”loop”
  5. preload:视频在页面加载时进行加载并预备播放,用法:preload=”auto” – 当页面加载后载入整个视频;preload=”meta” – 当页面加载后只载入元数据;preload=”none” – 当页面加载后不载入视频。注意:若使用了autoplay,则忽略preload
  6. src:要播放视频的url

 

一般来说,主题会强制视频大小,以便适应所有尺寸的设备浏览,但是如果没有强制的话,你可以将宽度设为100%,高度设为300~500均可。

 

 

上一篇:

下一篇:

文章评论

您好!请登录

取消回复
    展开更多