videojs rtmp No compatible source was found for this media.

最新推荐文章于 2024-04-07 10:25:47 发布
原创 最新推荐文章于 2024-04-07 10:25:47 发布 · 6.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#videoJS #流媒体 #rtmp #comptiable

本文介绍了解决video.js播放器中出现的“Nocompatiblesourcewasfoundforthisvideo”错误的方法。通过调整浏览器的Flash设置为默认允许，然后刷新页面即可解决此问题。

videojs提示 (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video.

就像下面这样。

在这里插入图片描述

解决方案:
将网站的flash设置成默认允许，然后刷新下，就可以了。像这样设置
在这里插入图片描述

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because t
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-17 1万+
因为vediojs的播放器有三个参数，第二个参数使用js进行赋值的时候，type字段可以不写，如果写了传过来的视频流的数据格式一定要满足，否则不成功。VIDEOJS：错误：（代码：4 MEDIA_ERR_SRC_NOT_SUPPORTED）无法加载媒体，原因可能是服务器或网络出现故障，也可能是格式不受支持。背景：使用videojs第三方插件，用于播放视频，videojs被封装成一个组件，通过点击事件达到如下目的：点击更改组件的src，以达到动态切换视频的效果。因为load() 方法重新加载音频/视频元素。
vue3 + video.js 加载多种视频流(HLS、FLV、RTMP、RTSP)封装开箱及用，发布npm
l976689的博客
04-07 6847
上一偏我们使用vue3和vite封装了一个audio插件发布npm官网，这里我们将封装一个视频video插件并发布npm供大家参考提示：下面不涉及新建项目和打包npm流程，需要的请看上一篇vue3 + vite自定义封装vue+audio ，并发布到npm详情介绍。
No compatible source was found for this video. 解决方法
11-22
videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）,路径为test/tes2.html。
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.
qq_40994735的博客
01-12 3万+
如何解决VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. <template> <!-- 这个组件是m3u8事件留组件 --> <div class="container"> <div class="player"> <div v-if="src===''"> 视频播放
VUE- 引用视频组件
weixin_30394669的博客
08-19 890
VUE- 引用视频组件 安装依赖 cnpm install vue-video-player -S cnpm install video.js -S 全局引用：在main.js中 import VuevideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css...
【Vue】Video.js 提示no compatible source was found for this media
Write less，do more
05-09 1万+
video.js问题：video.js 提示no compatible source was found for this media1.html2.js3.重点 问题：video.js 提示no compatible source was found for this media 查了很多文章，凡在vue项目中引入video.js插件， 都会出现视频播放器中间出现一个大叉号导致视频无法播放，同时控制台出现no compatible source was found for this media的错误提醒
<template> <div class="mainAspect"> <!-- <video id="videoElement" autoplay width="100%" height="100%"></video> --> <!-- <video autoplay id="videoPlayer" class="video-js vjs-default-skin" controls> <source :src="streamUrl" type="rtmp/flv"> </video> --> <video id="myVideo1" controls class="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js" preload="auto" style="width: 712px;height:320px;object-fit: fill" > </video> </div> </template> <script setup> import flvjs from "flv.js"; import videojs from "video.js"; import { computed, onMounted, ref, watch, onUnmounted } from 'vue'; import { getAction } from '../api'; const videoPath='rtsp://admin:sess2025@109.136.71.182:554/streaming/channels/401' const streamUrl=ref("rtmp://109.136.146.133:1935/live/home") const flvPlayer = ref(''); const VideoData=async ()=>{ const res = await getAction(videoPath); console.log(res) }; const createVideo=()=>{ // if (flvjs.isSupported()) { // var videoElement = document.getElementById("videoElement"); // flvPlayer.value = flvjs.createPlayer({ // type: "flv", // isLive: true, // cors:true, // fluid:true, // autoCleanupSourceBuffer: true, // 是否自动清理缓存 // stashInitialSize:128, // url: "http://109.136.146.133:9000/live?port=1935&app=live&stream=home", // // url: "rtmp://109.136.146.133:1935/live/home", // }); // flvPlayer.value.attachMediaElement(videoElement); // flvPlayer.value.load(); // setTimeout(() => { // flvPlayer.value.play(); //播放流 // }, 1000); // } else { // console.error("Your browser does not support FLV.js"); // } var player=videojs('myVideo1',{ sources:[{ type: "rtmp/flv", src:streamUrl.value, }], //属性可以去查中文文档 controls: true, //自动播放属性,muted:静音播放 autoplay: true, preload: "auto", textTrackDisplay: false, errorDisplay: false, controlBar: false, bigPlayButton: false, autoplay: true }); console.log(player.sources.src); player.on("play", function(){ this.timer = setTimeout(()=>{ //设置延迟执行 console.log('延时3秒放大窗口'); },3000); }); }; onMounted(() => { VideoData(); // createVideo(); });这里为什么找不到地址，明明地址是正确的No compatible source was found for this media. MediaError {code: 4, message: 'No compatible source was found for this media.'}
最新发布
09-26
错误信息是"No compatible source was found for this media"。根据引用内容，我们可以得到一些线索： 1. 引用[1]和引用[3]都提到了播放RTMP流时出现这个错误。引用[3]特别指出，对于RTMP流，由于不再支持Flash，...
video.js 对接实时视频 rtmp/flv 格式
山外小楼
05-24 2万+
在用video.js 做实时视频对接rtmp格式时候发现只有5.8版本的JS才支持，更高的 7.1 就不支持了，所以在做时候要看好vode.js版本，一般在这个网址里面下http://www.jq22.com/jquery-info404。 1.在页面中引用video-js.cs样式文件和video.js <link href="video-js.css" rel="styleshee...
vue项目播放rtmp直播流
youyudexiaowangzi的专栏
08-01 4510
windows、chrome浏览器、vue项目 安装依赖 npm install vue-video-player -S main.js引入 import VideoPlayer from 'vue-video-player' import 'videojs-flash' //import 'videojs-contrib-hls'//不确定是否需要了 require('video.js/dist/video-js.css') require('vue-video-player/src/cust
EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器出现no compatible source was found for this media问题的解决
EasyDSS官方技术博客
06-22 1035
EasyDSS流媒体解决方案总体可划分成三个部分：前端视频源设备（PC、手机、摄像机）流媒体数据获取并即时回传、流媒体服务器端直播和录像与回放、客户端直播播放与录像检索回放。前端推流我们使用跨平台的RTMP推送库EasyRTMP（支持平台包括有：Windows、Linux、Android、iOS、ARM），流媒体服务器端采用EasyDSS流媒体服务软件，客户端支持全平台（Windows、Android、iOS、H5），客户端可通过EasyDSS流媒体服务器提供的HTTP服务接口，结合EasyPlayer播放
videojs播放rtmp流，测试代码
05-08
videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）, 路径为test/tes2.html。videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）, 路径为test/tes2.html。videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）, 路径为test/tes2.html。
Vue.nextTick(callback)解决video.js中出现no compatible source was found for this media的问题
elephant230的博客
07-27 2万+
查了很多文章，凡在vue项目中引入video.js插件， 都会出现视频播放器中间出现一个大叉号导致视频无法播放，同时控制台出现no compatible source was found for this media的错误提醒的情况， 究竟是什么原因呢？ 翻译过来是找不到匹配媒体资源： no compatible source was found for this media 该媒体没有...
videojs报错：No compatible source was found for this media.
小糖穿越火线
02-06 1万+
videojs报错：No compatible source was found for this media. 分析： 1. 在初始化时，没有在src中添加视频资源。 2. 视频资源为空或视频资源无效无法播放。 解决，检查资源是否有效，得以解决。 ...
videojs，报错：No compatible source was found for this media.
王海虎的博客
07-21 5396
1. 需要起一个web服务，nginx、Apache... 2. 打开Flash
Vue的nextTick
MikazukiMo的博客
05-31 245
Vue.nextTick( [callback, context] ) 参数： {Function} [callback] {Object} [context] 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
videojs播放rtmp流提示 No compatible source was found for this video.
hb_zhouyj的博客
07-19 2万+
videojs播放rtmp视频流，提示  (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video.如下：   解决方案： 1.将文件放到服务器上，就是别用本地文件的方式打开 2.用的是chrome，将网站的flash设置成默认允许，然后刷新下，就可以了。像这样设置   ...
EasyDSS流媒体服务器出现no compatible source was found for this media问题的解决
热门推荐
Babosa的专栏
05-26 11万+
在EasyDSS流媒体服务器的客户反馈中，我们遇到这样一个现象，在chrome中经常会出现RTMP/HLS流无法播放的问题： 这个问题复现的几率比较低，因为chrome禁止了flash的加载，这也从另一个角度反应了H5势在必行，各家浏览器对flash的支持也越来越严苛了： 只要在加载中将flash插件支持加上就可以了获取更多信息邮件：support@easydarwin.org WEB：www.
FFmpeg分片播放提示:No compatible source was found for this media
u010312671的专栏
03-09 5603
这里写目录标题问题场景产生原因解决方式: 问题场景 当写死一个url地址时不报错，使用动态参数赋值，就会报错。如下图： 代码如下，写死一个url地址可以正常播放视频。 如果使用在vue中使用:src进行赋值，则提示No compatible source was found for this media。 <video id="example-video" width="800" height="400" class="video-js vjs-default-skin vjs-big-play-
视频正常播放时进度条不变VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for
buruyang的博客
12-16 6260
错误信息：VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.没有找到与此媒体兼容的源。 原因：建dom节点时，视频src的值为空导致的问题 解决方法：可以给src一个初始化默认值 ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值