MP4视频无法在H5网页中播放

这篇具有很好参考价值的文章主要介绍了MP4视频无法在H5网页中播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

MP4视频在本地可以播放,但是在html5的video多媒体标签不能正常播放,不显示图像,其实是编码的原因,虽然格式是MP4,但是html5只支持H.264的编码格式。

关于html5的video标签知识:

  1. html4协议做网站时我们在网页播放视频使用flash播放,要么就是嵌入式页面实现
  2. html5网页可以使用video标签,使得多媒体文件很方便的在网页中播放

关于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 src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500"height="300"></video>

如果浏览器不支持video标签:

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

video标签的扩展参数详解:文章来源地址https://www.toymoban.com/news/detail-853145.html

<video width="500" height="250" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
</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

到了这里,关于MP4视频无法在H5网页中播放的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【UE5】解决UE5无法播放mp4视频

    最近接手的项目需要把项目从UE4中迁移至UE5.0,其中遇到了一个mp4视频无法播放的bug,这里做一下记录。 在官方论中有提到过这个bug,https://forums.unrealengine.com/t/media-textures-wont-display-video-in-ue5-preview-1-while-using-directx-12/503980/2 按照常规的方法播放视频在MediaPlay的Play节点会返回

    2024年01月17日
    浏览(60)
  • Ubuntu 18.04上无法播放MP4格式视频解决办法

    ubuntu18.04系统无法播放MP4格式视频,提示如下图所示: 解决办法: 1、首先,确保ubuntu系统已完全更新。可使用以下命令更新软件包列表: sudo apt update ,然后使用以下命令升级所有已安装的软件包: sudo apt upgrade 2、接下来,安装Ubuntu Restricted Extras软件包,它提供了播放非免

    2024年02月08日
    浏览(43)
  • gitee page发布的静态网站,无法播放目录中的mp4视频

    起因是希望在gitee上部署静态网站,利用three.js VideoTexture 环境贴图播放视频。 但是试了多几次 mp4均提示404,资源无法获取; 找了很多方案,最后发现将视频转为ogv 就可以完美适配了; mp4转ogv 附threejs使用ogv进行环境贴图的代码:

    2024年02月14日
    浏览(38)
  • 小程序video标签在(华为手机)无法播放.mp4长视频(ios上正常)

    后台上传了有一个大小为700+M的视频文件,结果在小程序播放页面加载一会就会黑屏,并且视频时长也没有解析成功,但是视频路径在浏览器访问是没有问题的。(当时是在小米手机出现该bug) 可能原因: 上传阿里云视频路径地址有问题。(已排除) 可能视频文件过大,导

    2024年02月09日
    浏览(115)
  • 音视频八股文(10)-- mp4结构

    mp4⽂件格式⼜被称为MPEG-4 Part 14,出⾃MPEG-4标准第14部分 。它是⼀种多媒体格式容器,⼴泛⽤于包装视频和⾳频数据流、海报、字幕和元数据等。(顺便⼀提,⽬前流⾏的视频编码格式AVC/H264 定义在MPEG-4 Part 10)。 mp4⽂件由box组成,每个box分为Header和Data。其中Header部分包含了

    2024年02月02日
    浏览(84)
  • 【音视频 ffmpeg 学习】 RTMP推流 mp4文件

    1.RTMP(实时消息传输协议)是Adobe 公司开发的一个基于TCP的应用层协议。 2.RTMP协议中基本的数据单元称为消息(Message)。 3.当RTMP协议在互联网中传输数据的时候,消息会被拆分成更小的单元,称为消息块(Chunk)。 (1). linux 环境准备 安装nginx 和 rtmp模块 下载nginx安装包 下载

    2024年02月03日
    浏览(67)
  • Qt/C++音视频开发46-音视频同步保存到MP4

    用ffmpeg单独做视频保存不难,单独做音频保存也不难,难的是音视频同步保存到MP4中,重点是音视频要同步,其实这也不难,只要播放那边音视频同步后的数据,写入到文件即可。最难的是在播放过程中不断随机的切换播放进度,而且还会暂停播放、暂停录制的情况出现,这

    2024年02月17日
    浏览(72)
  • 【音视频开发】FFmpeg转换与封装 I - MP4格式

    1 FFmpeg转换与封装 1.1 MP4格式转换 1.1.1 MP4格式标准         FFmpeg支持的媒体封装格式具有多样性与全面性,与此, 我们还可以使用FFmpeg来对媒体格式进行转换与封装 。 在互联网常见的格式中,跨平台最好的应该是 MP4 文件,因为 MP4 文件既可以在PC 平台的Flashplayer中播放,

    2024年02月08日
    浏览(83)
  • 音视频编码实战-------pcm+yuv数据转成MP4

    avcodec_find_encoder: 根据编码器ID查找编码器 avcodec_alloc_context3:创建编码器上下文 avcodec_open2:打开编码器 avformat_alloc_output_context2:为输出格式创建复用器上下文 avformat_new_stream:创建音视频流 avcodec_parameters_from_context:将编码器上下文中的参数拷贝到音视频流中的编码器参数中AVCodec

    2024年02月15日
    浏览(67)
  • c# winform播放MP4视频

    1、在所有windows窗体中添加windows media player控件     2、拖入windows media player控件,编写代码  

    2024年02月12日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包