uniapp使用video标签无法播放视频出现黑屏问题处理

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

uniapp使用video标签无法播放视频出现黑屏问题处理

问题出现情况

uniapp使用video标签无法播放视频出现黑屏问题处理
并且点击播放后出现报错
uniapp使用video标签无法播放视频出现黑屏问题处理

解决办法

问题出现的原因可能是video的视频流不兼容或者在f12下无法看见视频文件导致的,所有我们使用computed计算属性来解决这个问题

js

computed:{
	videoHtml: function() {
		return `<video  autoplay loop muted controls="controls" width="100%" height="870px"><source src="${this.videoSrc}" type="video/mp4"></video>`;
	}
}

html

<view v-html="videoHtml"></view>

按照上面的做法 这样问题就解决了
uniapp使用video标签无法播放视频出现黑屏问题处理

希望能解决大家的问题 一键三连文章来源地址https://www.toymoban.com/news/detail-512181.html

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

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

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

相关文章

  • 谷歌chrome浏览器无法自动播放video标签视频的问题

    问题根源详见: Chrome中的自动播放政策  https://developer.chrome.com/blog/autoplay/  The Autoplay Policy launched in Chrome 66 for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome. For the Web Audio API, the autoplay policy launched in Chrome 71. This affects web games, some WebRTC appli

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

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

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

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

    2024年02月12日
    浏览(37)
  • uniapp小程序中使用video视频播放卡顿

    问题:在使用uniapp小程序的video视频播放,视频已经在播放了,但是进度条没走,还是卡顿的状态(测试ios能正常使用,安卓手机会出现此问题) 在网上找了很多方法,最多的说是用:custom-cache=\\\"false\\\",试了并没有效果,看来和我问题不一样,后来用了个简单粗暴的方法,发现是有效果的,以下是

    2024年04月11日
    浏览(24)
  • java实现video标签视频流播放

    问题: 在遇到video标签播放后端视频源时问题。直接返回文件流的话 video需要将文件整个下载一次才会播放。这样如果小文件没有问题。如果文件大的话就比较恶心了。 解决方案:通过模拟video标签默认的range bytes规范方法分段获取视频信息。 video标签是通过请求头带上 Ran

    2024年02月14日
    浏览(33)
  • 苹果手机video标签播放视频问题(播放mp4视频遇到的坑)

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

    2024年02月22日
    浏览(29)
  • 苹果safari浏览器播放不了video标签视频

    今天遇到了个神奇的问题,视频文件在pc端和安卓手机上播放都没问题,但是在ios上就是播放不了,大概代码如下: 前端代码: 后端代码: PC端没任何问题: IOS端播放不了: 在网上搜索了很多办法,有加前端参数配置的: 有改后端多次发送请求,分段获取数据流的: 经过

    2024年02月16日
    浏览(54)
  • video标签自动播放音视频并绘制波形图

    html中的video标签可以用来播放常见的音视频格式,支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等,当然支持的格式也和浏览器和操作系统有关。这里以一个可以自动播放音视频并绘制波形图的页面为例说明一下video标签的用法。 video标签想自动播放,需要设置三个可选属性

    2024年02月09日
    浏览(36)
  • 三种视频播放标签(video,embed,iframe)-------笔记

    1.video:可以兼容移动端和pc段 支持格式: Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 语法: 2.embed:用于flash文件或者在使用video标签不成功的情况下使用,不

    2024年02月12日
    浏览(29)
  • 实现html页面插入视频的自动播放、视频播放结束后的事件触发(video标签)

    要实现自动播放需要同时使用autoplay和muted属性,简单示例代码如下: html代码: css代码: 要实现视频播放结束后的事件触发需要使用addEventListener(“ended”, function () {})进行事件监听,简单示例代码如下: html代码: css代码: js代码: (1)菜鸟网址:https://www.runoob.com/tags/t

    2024年02月05日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包