关于使用video标签插入视频时,视频无法播放的问题

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

写代码遇到一个问题:使用video标签插入视频时,在chrome中无法播放,只显示了一个封面图片,在ie却可以播放。

video的使用是看别人的:
关于使用video标签插入视频时,视频无法播放的问题

由于照搬别人的代码,我写的代码如下:

<video width="100px" height="100px" src="./images/me.mp4" autoplay></video>

然后出现问题:只有个封面,不能播放视频
关于使用video标签插入视频时,视频无法播放的问题

解决过程:

  1. ❌我以为是浏览器兼容问题,查资料发现chrome浏览器只支持H264编码格式的mp4,而mp4有多种格式,所以我下载了个格式工厂(免费)转换了格式。但不是这个问题
  2. ❌ iis管理器中加入后缀名为.mp4的文件。显示已添加,也不是这个问题。

解决方法
问了老师,原来是我对video标签还不够熟悉。controls属性是必须要写的,controls 属性提供添加播放、暂停和音量控件。
加上以后视频就能正常播放了:

<video width="100px" height="100px" src="./images/me.mp4" controls autoplay></video>

关于使用video标签插入视频时,视频无法播放的问题文章来源地址https://www.toymoban.com/news/detail-504123.html

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

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

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

相关文章

  • 苹果手机video标签播放视频问题(播放mp4视频遇到的坑)

    1.场景描述 服务端上传MP4视频文件,iOS客户端通过URL播放该视频文件。提供视频接口,可以进行视频下载或者直接播放,但是iOS手机无法播放,且PC端safari浏览器也无法播放。 2.问题描述 安卓手机可以正常播放视频,iOS手机无法播放,且PC段safari浏览器也无法播放。 3.问题分

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

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

    2024年02月09日
    浏览(115)
  • vue中使用video插件在微信浏览器中视频无法自动播放的问题

    测试机:安卓华为p30,ios暂未测试,不过看网上说的ios比较好设置,以下代码也设置了兼容 js 是的,你没看错,就是这么简单,并没有网上那么复杂的获取什么什么的,因为我都试过坑了,到最后发现直接在created中就能解决问题

    2024年02月11日
    浏览(71)
  • video标签设置了autoplay,自带音频的视频在谷歌浏览器仍无法自动播放

    原因分析:谷歌浏览器可以自动播放视频,不能自动播放音频。如果视频中自带音频就会导致该视频无法自动播放。 解决办法:在video标签加上静音属性muted,自带音频的视频就可以自动播放了,但是该视频无声音。 备注:1、这是谷歌浏览器自身的问题。2、Safari浏览器可正

    2024年02月12日
    浏览(64)
  • 【标签bug】video标签部分mp4文件在ios中无法自动播放的问题

    在安卓端和h5页面调试端,video标签下的mp4格式文件均可以播放,但是video标签部分mp4文件在ios中无法自动播放的问题,搜了很多资料有如下解决方案 前四个属性: muted:静音播放,一般浏览器chrome为例,用户需要在页面上操作一次,才能播放视频,不允许用户进入后直接显示

    2024年02月06日
    浏览(70)
  • HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?

    请使用cover-image或cover-view cover-image | uni-app官网 https://uniapp.dcloud.net.cn/component/cover-image.html#cover-image   cover-view | uni-app官网 https://uniapp.dcloud.net.cn/component/cover-view.html#cover-view 情况1:如上图,注意要使用以下位置才能达到遮住的效果   情况2:如上图,就直接用cover-view自定义一

    2024年02月16日
    浏览(62)
  • 关于 video 视频 autoplay 播放问题及解决方法

            自动播放机制其实就是会拦截自动播放的视频。         chrome、safari、firefox、edge 浏览器在某版本后都限制了video自动播放功能,原因为内部机制认为此视频为垃圾广告,和IOS系统一样,同时也是为客户体验度考虑,因此会限制自动播放功能。 视频静音模式允

    2024年02月04日
    浏览(42)
  • Unity2020Video player发布后无法播放视频问题

    我也是小白,用Unity过程中也是遇到很多草蛋问题,我在做demo的时候第一次用到Unity的video player,听说ogv格式能直接播放,我就把视频转了ogv格式,然后放到clip里,编辑器里运行完全没问题,发布打包后就播放不了,黑屏都没有,直接视频没了,百度搜的绝对路径说是放到

    2024年02月15日
    浏览(54)
  • ios和安卓手机端使用video标签播放失败的问题

    手机端请求后端接口,返回视频流给前端,然后在手机端进行播放,手机端需要适配ios和安卓,后端在开发好接口后在浏览器、postman调用接口时都能正常播放,安卓客户端也可以正常播放,但是ios播放失败。 刚开始觉得是网速太慢的原因,换了一个更小的视频,仍然不行,

    2024年01月18日
    浏览(55)
  • 关于Linux系统中使用Kazam录制的视频在Win系统中无法播放的问题解决办法

            今天在linux系统【ubuntu】中录制了一段视频,想要在win系统中进行剪辑,但是发现无法打开,使用的是Kazam录制的mp4格式视频。 安装方式——linux终端输入: 使用方式——linux终端输入: 使用Kazam录制好了一段视频,将mp4格式的视频文件移动到win系统中,打开时出现这

    2024年04月12日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包