整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

解决H5网页中用video标签无法播放MP4视频的方法

为什么录制的MP4视频在本地可以播放但是使用html5的video多媒体播放标签不能正常播放只有一个进度条而不显示图像?其实就是一个视频编码的问题,格式虽然都是MP4但是html中只支持H.264的编码格式,无奈只能重新转换一下编码了。

为了避免大家遇到同样的问题我在这里就给大家普及一下html5关于<video>标签的知识吧:在使用html4协议做网站时我们想要在网页上播放一个视频要不使用flash去播放,要么就是嵌入式页面来实现,对于html5来说这两种方法非常的不方便因为一个牛逼哄哄的<video>出现了,这个标签的功能就是让多媒体文件可以很方便的在网页中播放。

html中播放一个视频只需要一个标签:

  1. <video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300"></video>

代码虽然少了很多,但是功能却很健全,这就是html5的亮点之一吧!

关于<video>标签所支持的视频格式和编码:

  • MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
  • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
  • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

通过上面的信息我们会发现只有h264编码的MP4视频(MPEG-LA公司)、VP8编码的webm格式的视频(Google公司)和Theora编码的ogg格式的视频(iTouch开发)可以支持html5的<video>标签。

如果浏览器不支持video标签怎么办?

比如IE浏览器还有老版本的浏览器对html5的支持不太好,当用户用这些浏览器打开我们带有视频的网页怎么办呢?

我们可以把代码这样写:

  1. <video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300">您的浏览器不支持播放该视频!</video>

这样在不支持html5的浏览器中就会提示“您的浏览器不支持播放该视频!”啦!

关于video标签的扩展参数说明:

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式,这样我们只要多准备几个不同格式的视频就可以了。

用法:

  1. <video width="500" height="250" controls="controls">
  2. <source src="movie.ogg" type="video/ogg">
  3. <source src="movie.mp4" type="video/mp4">
  4. 您的浏览器不支持此种视频格式。
  5. </video>
  6. autoplay :出现该属性意味着视频在就绪后将自动播放,用法:autoplay="autoplay"
  7. controls :出现该属性意味着向用户显示控件,如播放按钮等,用法:controls="controls"
  8. height:设置高度 width:设置宽度
  9. loop:自动重播,用法:loop="loop"
  10. preload:视频在页面加载时进行加载并预备播放,用法:preload="auto" - 当页面加载后载入整个视频;preload="meta" - 当页面加载后只载入元数据;preload="none" - 当页面加载后不载入视频。注意:若使用了autoplay,则忽略preload
  11. src:要播放视频的url

关于<video>标签我就介绍到这里,相信大家都对这个标签有了深刻的了解!

【推荐课程:Html5视频教程】

以上就是解决H5网页中用video标签无法播放MP4视频的方法的详细内容,更多请关注其它相关文章!

更多技巧请《转发 + 关注》哦!

近的一个前端外包的项目中,写的页面在chrome中打开时,video标签都不能自动播放(奇怪的是相同的视频,两个月前在chrome下播放还是正常的;但现在,mac下一直无法播放,只有在controls的模式下点击播放按钮才可以播放;而windows下按F5刷新后可以播放,但是右键刷新页面无法播放),Firefox却是正常播放。

最后找到了一篇博客说是要在video标签中添加muted属性,亲测有效,代码如下:

  1. <video controls=“controls” muted=“muted” autoplay=“autoplay”>
  2. <source src=“vedio/qietu.mp4” type=“audio/mp4”></source>
  3. </video>

原理就是大多数浏览器在都支持静音的视频播放,如果你的视频需要有声音,或者要用音频,这个还是不能解决问题。

问题2

视频太大导致的不能自动播放问题(原因往往在于,视频要播放的时候,视频本身还没加载完。。。)基于这个思路,我写了这个代码,就是反复的去执行播放操作,成功以后停止,亲测有用。

var play = setInterval(function(){

console.log(1);

var myVideo = $(‘#video’)[0]; //获取视频video

if (myVideo.paused){

myVideo.play();

}else{

clearInterval(play);

//myVideo.pause();

}

},100)

以上为切图网 qietu.com原创,转载请注明来源。

、为啥PPT中swf文件不能播放?

因为缺少插件flash player插件,安装后即可解决swf格式文件视频在ppt中无法播放的问题。

1、WPS里的SWF格式视频,需要安装flash player插件才能正常播放。

2、如果需要单独播放SWF格式视频,可以利用FLASH控件实现播放FLASH的SWF文件,比如实用Flash播放器、超级Flash播放器或者SWF Flash Player。

二、怎么下载flash player插件?

它是一款免费插件,它是Adobe公司出品的,全称是Adobe flash player,直接到官网下载即可。

1、官网地址下载:

https://www.flash.cn/

重要提醒:请直接到上方提供的Adobe flash player官网下载,认准官网,否则会有恶意捆绑哦。

2、请仔细辨别下载按钮,看下图:

请点击上方图片红圈内的链接下载Adobe flash player,不然会被下载全家桶,全家桶你懂的。别问我怎么知道 的,都是泪。

3、根据你电脑系统型号选择:

苹果系统的选择最下面的mac os系统的。

4、点击下载保存到自己的电脑里。

双击安装包打开进行安装,安装前会有一个提醒,如下图,选择允许允许即可:

5、完成后重启PPT即可。

安装完成,点击右下角完成,如下图,然后重启ppt,插入的swf文件就可以播放了。

三、flash player是什么插件?为什么需要单独下载安装。

理论上苹果系统和微软系统,都对外公布不再支持flash player插件,但是你记得xp隐退用了多少年才逐渐消失在你的视野吗?

Flash Player是早年由Adobe研发的一款多媒体播放器,还有一款矢量动画制作软件叫Adobe Flash 。当年玩小游戏,开心网之类的朋友,包括至今QQ空间很多挂件都是Flash Playe才能支持正常显示。

旧版浏览器都是自带Flash Player插件的,现在基本消失,win10期间Edge已经禁用了这款插件,由HTML5技术替代。所以金山PPT如果置入了swf格式文件视频需要Flash Player支持才能支持播放。