炼药系统.md

Posted by lizhao on 07-09,2019

炼药系统

表结构

静态表

string表

keyvalue
str_refine_drug炼制
str_refine_drug_success炼制成功
str_refine_drug_fail炼制失败
str_refine_drug_sure是否消耗以上材料进行炼制?
materialvarchar

drug表

字段类型描述备注
idint主键自增长
namevarchar名字
lvint药品等级
printint成功概率
purposevarchar功能关联purpose表,用"|"分割
materialvarchar材料关联道具表,用"|"分割

purpose格式:{1,30}|{3,55} 表示purpose表中id为1的效果发挥30,3的发挥55

material同上

purpose表

字段类型描述备注
idint主键自增长
actonint作用于攻击/守备/hp/mp
typeint正负效果正的是好效果

动态表

拥有的药品 表

字段备注
id主键
userId用户id
drugId药品id
num数量

系统介绍

  1. 一个编程的经验:调试的时候,不要一次性进行2个黑盒子操作。前面也有说挺多小哥联系我,说我之前写的解决方案不顶用,我帮他们查了下,根据操作一步步下来是就能运行了。一问原因:1. 觉得这个解决方案不重要就没去试 2. 我的直播源用我自己的,直播源出问题了 做工程的很多情况下都是 在不断的调试下完成工作的,有时候真的不能放弃一点机会。

所以后面的测试

全局变量

  1. String ROOT_PATH = "E:\workdir\doc\csdn";
  2. String SAFEWARE_PATH = ROOT_PATH + "\safeware";
  3. String RELEASE_PATH = ROOT_PATH + "\release";
  4. String NGINX_WEB_PATH = RELEASE_PATH + "\nginx-web";
  5. String NGINX_GRYPHON_PATH = RELEASE_PATH + "\nginx-Gryphon";
  6. String FFMPEG_PATH = RELEASE_PATH + "\ffmpeg";

ffmpeg

软件介绍

我的根路径E:\workdir\doc\csdn

├─bak │ │ nginx 1.7.11.3 Gryphon.zip
│ │ nginx-rtmp-module-master.zip │ │ nginx-web.zip │ │ orange.mp4 │ │
│ └─ffmpeg

[toc]

Nginx

基本使用

介绍

Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务。 这里我们使用的是配置了rtmp模块的nginx,

安装

使用方式非常的简单,从官网下载(http://nginx.org/en/download.html)或者直接使用目录下的安装包nginx-web.rar,解压到目录RELEASE_PATH (看图1序号1)

运行

打开小黑框,切到NGINX_WEB_PATH目录(nginx.exe所在目录),输入nginx,即可运行(看图1序号2.3)

按指定的配置文件运行

同时也支持按照指定的配置文件进行

nginx -c conf/nginx.conf 

测试方法

打开浏览器,输入127.0.0.1,如果能出来一个页面,就是成功运行了(看图1序号5)

关闭

找到进程nginx,一次会有2个进程,先右键关掉下面的那个,然后关掉上面那个 (看图1序号4)

配置文件

在 NGINX_WEB_PATH\conf 目录下面,有一个nginx.conf,里面可根据实际情况进行配置,把一些内容删掉,就留下这些了。

主要看下http--server

worker_processes  1; #允许生成的进程数,默认为1
# events块:配置影响nginx服务器或与用户的网络连接。
# 有每个进程的最大连接数,选取哪种事件驱动模型处理连接请求,
# 是否允许同时接受多个网路连接,开启多个网络连接序列化等。
events {
    worker_connections  1024; # 最大连接数,默认为512
}

# http块:可以嵌套多个server,配置代理,缓存,日志定义等绝大多数功能和第三方模块的配置。
# 如文件引入,mime-type定义,日志自定义,是否使用sendfile传输文件,连接超时时间,单连接请求数等。
http {
    include       mime.types;   #文件扩展名与文件类型映射表
    default_type  application/octet-stream; #默认文件类型,默认为text/plain
    sendfile on;   #允许sendfile方式传输文件,默认为off,可以在http块,server块,location块。
    keepalive_timeout 65;  #连接超时时间,默认为75s,可以在http,server,location块。

	# server块:配置虚拟主机的相关参数,一个http中可以有多个server。
    server {
        listen       80; # 监听的端口
        server_name  localhost;#监听地址      

		# location块:配置请求的路由,以及各种页面的处理情况。
        location / {
            root   html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

在本项目中的使用

(可以先不操作这一块内容)

在项目中,将这个作为web容器,用来运行显示播放网页的。把videojs章节的最终文件video拷贝到 NGINX_WEB_PATH/html文件夹下(可忽略)。

修改配置文件中的端口http--server--listen,端口前后一致就行,这里设置的是11240

listen       11240; # 监听的端口

修改配置后,需要重启下nginx,如果没开那就启动就好

然后访问 http://127.0.0.1:11240,有nginx界面出来就可以关掉nginx,暂时用不到了。

Nginx-rtmp

nginx本身是在linux上面的,要是想加入rtmp模块,可以下载源码放到linux上面编译,或者在windows上面直接搭建编译环境。本身也为这个项目发愁,也就没必要搞这些事情了。这边是直接使用其他小哥搞的一个软件nginx-win-Gryphon,里面集成了挺多的模块。不过我们用到的是rtmp模块,满足我们的需求的。

基本使用

这个本质还是nginx,请看上一节

环境搭建

  1. 已经有了nginx-Gryphon.zip(http://nginx-win.ecsds.eu/download/ 选择nginx 1.7.11.3 Gryphon)和nginx-rtmp-module.zip(https://github.com/arut/nginx-rtmp-module)(自己下载或者我提供的哈)

  2. 解压nginx-Gryphon.zip文件到RELEASE_PATH下

  3. 解压nginx-rtmp-module.zip到NGINX_GRYPHON_PATH下

注意有可能有2层nginx-rtmp-module,记得删掉其中一层

这时候可以启动运行nginx-Gryphon下,看是否能成功运行

  1. 复制 NGINX_GRYPHON_PATH/conf/nginx-win.conf,命名为nginx-win-rtmp.conf,直接在该文件中进行以下修改,或者复制我下面这份配置内容到文件
    • 在http同级添加rtmp{},这里可选择rtmp或hls
    • 开启rtmp需要在http-server下添加location/stat和location/control和location/stat.xsl
    • 开启hls需要在http-server下添加location /hls
    • 修改端口11242
worker_processes  2;
events {
    worker_connections  8192;
}

# 修改处--rtmp和hls配置
rtmp {
    server {
        listen 1935;
        chunk_size 4000;
		# 开启rtmp
        application live {
             live on;
        }
		# 开启m3u8
		application hls {    
			live on;    
			hls on;    
			hls_path /temp/app;    
			hls_fragment 5s;    
        }    
    }
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        off;
    server_names_hash_bucket_size 128;

    client_body_timeout   10;
    client_header_timeout 10;
    keepalive_timeout     30;
    send_timeout          10;
    keepalive_requests    10;

    server {
        listen       11242; # 修改出11242
        server_name  localhost;

		
		# 修改处--hls配置
		location /hls {    
			#server hls fragments    
			types{    
				application/vnd.apple.mpegurl m3u8;    
				video/mp2t ts;    
			}    
			alias /temp/app;    
			expires -1;    
        }   
		
		# 修改处--rtmp配置 下面3个
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }
        location /stat.xsl {
            root nginx-rtmp-module/;
        }
        location /control {
            rtmp_control all;
        }

		# For Naxsi remove the single # line for learn mode, or the ## lines for full WAF mode
        location / {
            root   html;
            index  index.html index.htm;
        }
     
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
}
  1. 在NGINX_GRYPHON_PATH/temp文件下面新建文件夹,重命名为app

  2. 启动nginx-Gryphon,使用指定配置文件的方式

nginx -c conf/nginx-win-rtmp.conf

FFmpeg

FFmpeg的名称来自MPEG视频编码标准,前面的“FF”代表“Fast Forward”,FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。可以轻易地实现多种视频格式之间的相互转换。

安装

直接解压安装包(http://ffmpeg.org/download.html),解压文件到RELEASE_PATH下

测试

小黑框切到FFMPEG_PATH/bin路径下面,输入以下指令,查看是否有版本显示

ffmpeg -version

显示内容

E:\workdir\doc\csdn\release\ffmpeg\bin>ffmpeg -version
ffmpeg version N-93005-gd92f06eb66 Copyright (c) 2000-2019 the FFmpeg developers
built with gcc 8.2.1 (GCC) 20181201
configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-amf --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth --enable-libopenmpt
libavutil      56. 26.100 / 56. 26.100
libavcodec     58. 44.100 / 58. 44.100
libavformat    58. 26.100 / 58. 26.100
libavdevice    58.  6.101 / 58.  6.101
libavfilter     7. 48.100 /  7. 48.100
libswscale      5.  4.100 /  5.  4.100
libswresample   3.  4.100 /  3.  4.100
libpostproc    55.  4.100 / 55.  4.100

运行

前面说到这个工具可以对音视频进行处理,搞一个视频 SAFEWARE_PATH 下面有一个测试视频orange.mp4,就拿他开刀了,输入指令试试:

这个路径记得改成自己的视频所在位置
ffmpeg -y -ss 10 -i E:\workdir\doc\csdn\safeware\orange.mp4 -to 15 -acodec copy -vcodec copy -copyts E:\workdir\doc\csdn\safeware\output.mp4

对比一下,发现剪辑出来10到15的视频

指令说明

下面是几个常见指令,我列出的这些只是这篇文章够用了,其实ffmpeg指令很多,我全列出来也没意思,需要的话去查查文档

-i 输入内容
-f 设定输出格式
-acodec: 音频选项, 一般后面加copy表示拷贝
-vcodec: 视频选项,一般后面加copy表示拷贝
-vprofile baseline //H.264有四种画质级别,分别是baseline, extended, main, high: 
					//  1、Baseline Profile:基本画质。支持I/P 帧,只支持无交错(Progressive)和CAVLC; 
					 // 2、Extended profile:进阶画质。支持I/P/B/SP/SI 帧,只支持无交错(Progressive)和CAVLC;(用的少) 
					 // 3、Main profile:主流画质。提供I/P/B 帧,支持无交错(Progressive)和交错(Interlaced), 
					 //   也支持CAVLC 和CABAC 的支持; 
					 // 4、High profile:高级画质。在main Profile 的基础上增加了8x8内部预测、自定义量化、 无损视频编码和更多的YUV 格式; 
					//H.264 Baseline profile、Extended profile和Main profile都是针对8位样本数据、4:2:0格式(YUV)的视频序列。在相同配置情况下,High profile(HP)可以比Main profile(MP)降低10%的码率。 
					//根据应用领域的不同,Baseline profile多应用于实时通信领域,Main profile多应用于流媒体领域,High profile则多应用于广电和存储领域。
					//fmpeg如何控制profile&level
-ar  freq 设置音频采样率					
-an		静音
-ac channels 设置通道 缺省为1					
-strict strictness 跟标准的严格性
-r 表示每一秒几帧 
-y 生成出来的文件强制替换
-ss 开始时间
-to 结束时间

vlc软件

VLC多媒体播放器(最初命名为VideoLAN客户端)是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影音光盘及各类流式协议。它也能作为unicast或 multicast的流式服务器在IPv4或 IPv6的高速网络连接下使用。它融合了FFmpeg计划的解码器与libdvdcss程序库使其有播放多媒体文件及加密DVD影碟的功能。

在这里我们主要是用来测试播放网络串流

安装

SAFEWARE_PATH 下面有一个安装包vlc-3.0.6-winxx.exe,运行,无限下一步就安装完成

测试

从下面的网络流中选择2个(一个m3u8一个rtmp),记得要选择能播放的

推流测试

  1. 启动nginx-Gryphon(带配置文件)
nginx -c conf\nginx-win-rtmp.conf
  1. 使用ffmpeg推送rtmp视频流,指令如下

输入信号为rtmp://live.hkstv.hk.lxdns.com/live/hks2

输出信号为rtmp://192.168.3.134:1935/live/stream

其他配置:音视频不转码,直接复制

E:\workdir\doc\csdn\release\ffmpeg\bin\ffmpeg -i rtmp://live.hkstv.hk.lxdns.com/live/hks2 -f flv -acodec copy -vcodec copy rtmp://192.168.3.134:1935/live/stream
  1. 使用vlc播放网络串流,能够播放表示rtmp推流这一块通过测试
rtmp://192.168.3.134:1935/live/stream
  1. 使用ffmpeg推hls视频流,指令如下

输入信号为rtmp://live.hkstv.hk.lxdns.com/live/hks2

输出信号为rtmp://192.168.3.134:1935/hls/video和http://192.168.3.134:11242/hls/video.m3u8

(这里可以回头看nginx的配置文件nginx-win-rtmp.conf中的rtmp-server-hls和http-server-hls,就能理解了)

其他配置:音视频不转码,直接复制

E:\workdir\doc\csdn\release\ffmpeg\bin\ffmpeg -i rtmp://live.hkstv.hk.lxdns.com/live/hks2 -f flv -acodec copy -vcodec copy rtmp://192.168.3.134:1935/hls/video
  1. 使用vlc播放网络串流,能够播放表示么m3u8推流这一块通过测试
rtmp://192.168.3.134:1935/hls/video
http://192.168.3.134:11242/hls/video.m3u8

videojs

我们网页播放视频,使用到了videojs。

video.js是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频,以及YouTube和Vimeo(通过插件)。支持在桌面和移动设备上播放视频。这个项目从2010年中期开始,现已经在40多万个网站上使用。

播放

这边提供了三个测试文件,对应的分别是videojs6.0以上播放rtmp,videojs6.0以下播放rtmp,videojs播放m3u8格式(pc+手机)

通用

引入lib

引入video.js,video-js.css

根据实际情况引入不同的插件 videojs-flash/videojs-http-streaming

videojs有一个免费的cdn,可以直接在html的script中引入

<!-- unpkg -->
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>

<!-- cdnjs -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video-js.css" ref="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video.js"></script>
写video标签

设置id,样式(class),默认封面(poster),宽高

<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"
       poster="../common/qrcode.jpg" width="800" height="600">
    <source src='rtmp://live.hkstv.hk.lxdns.com/live/hks2' type='rtmp/flv'/>
</video>

js中进行播放
<script>
    var player = videojs('my-video');
    player.play();
</script>

videojs-rtmp-above6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>rtmp测试</title>

    <script src="video.js"></script>
    <script src="videojs-flash.js"></script>
    <link href="video-js.css" rel="stylesheet">
    <!--下面一行要是没有,那么就会往https://vjs.zencdn.net/swf/5.4.2/video-js.swf加载-->
    <script>
        videojs.options.flash.swf = "video-js.swf";
    </script>
</head>
<body>
<h3>注意:videojs版本大于6的使用这个文件解析</h3>
<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"
       poster="../common/qrcode.jpg" width="800" height="600">
    <!--这三个一般可以-->
    <!--香港卫视-->
    <!--rtmp://live.hkstv.hk.lxdns.com/live/hks-->
    <!--rtmp://live.hkstv.hk.lxdns.com/live/hks1-->
    <!--rtmp://live.hkstv.hk.lxdns.com/live/hks2-->
    <!--香港财经,rtmp://202.69.69.180:443/webcast/bshdlive-pc-->
    <!--韩国朝鲜日报,rtmp://live.chosun.gscdn.com/live/tvchosun1.stream-->
    <!--湖南卫视,rtmp://58.200.131.2:1935/livetv/hunantv-->
    <!--<source src='rtmp://live.hkstv.hk.lxdns.com/live/hks' type='rtmp/flv'/>-->
    <!--<source src='rtmp://live.hkstv.hk.lxdns.com/live/hks1' type='rtmp/flv'/>-->
    <source src='rtmp://live.hkstv.hk.lxdns.com/live/hks2' type='rtmp/flv'/>

    <!--这个等到上面的视频流通过后在去掉注释-->
    <!--<source src='rtmp://192.168.3.134:1935/live/stream' type='rtmp/flv'/>-->

</video>

<h1>如果觉得有帮助的话,欢迎关注我的公众号:小王老店</h1>
<br>
<h1>包含详细代码解析和常见问题</h1>
<img src="../common/qrcode.jpg">

<script>
    var player = videojs('my-video');
    player.play();
</script>

</body>
</html>

videojs-rtmp-below6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>rtmp测试</title>

    <script src="video.js"></script>
    <link href="video-js.css" rel="stylesheet">
    <script>
        videojs.options.flash.swf = "video-js.swf";
    </script>
</head>
<body>
<h3>注意videojs版本小于6的使用这个文件解析</h3>
<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"
       poster="../common/qrcode.jpg" width="800" height="600">
    <!--这三个一般可以-->
    <!--香港卫视-->
    <!--rtmp://live.hkstv.hk.lxdns.com/live/hks-->
    <!--rtmp://live.hkstv.hk.lxdns.com/live/hks1-->
    <!--rtmp://live.hkstv.hk.lxdns.com/live/hks2-->
    <!--香港财经,rtmp://202.69.69.180:443/webcast/bshdlive-pc-->
    <!--韩国朝鲜日报,rtmp://live.chosun.gscdn.com/live/tvchosun1.stream-->
    <!--湖南卫视,rtmp://58.200.131.2:1935/livetv/hunantv-->
    <!--<source src='rtmp://live.hkstv.hk.lxdns.com/live/hks' type='rtmp/flv'/>-->
    <!--<source src='rtmp://live.hkstv.hk.lxdns.com/live/hks1' type='rtmp/flv'/>-->
    <source src='rtmp://live.hkstv.hk.lxdns.com/live/hks2' type='rtmp/flv'/>

    <!--这个等到上面的视频流通过后在去掉注释-->
    <!--<source src='rtmp://192.168.3.134:1935/live/stream' type='rtmp/flv'/>-->
</video>

<h1>如果觉得有帮助的话,欢迎关注我的公众号:小王老店</h1>
<h1>蹭一个关注量</h1>
<br>
<h1>包含详细代码解析和常见问题</h1>
<img src="../common/qrcode.jpg">

<script>
    var player = videojs('my-video');
    player.play();
</script>

</body>
</html>

videojs-m3u8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>m3u8测试</title>
    <script src="video.js"></script>
    <script src="videojs-http-streaming.js"></script>
    <link href="video-js.css" rel="stylesheet">
</head>
<body>
<h3>注意:videojs版本大于6的使用这个文件解析</h3>
<video id="my-video" class="vjs-default-skin" controls  width="640" height="268"
       poster="../common/qrcode.jpg"
>
    <!--这3个一般满足要求了-->
    <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
            type="application/x-mpegURL">
    <!--<source src="http://ivi.bupt.edu.cn/hls/cctv6.m3u8" type="application/x-mpegURL">-->
</video>

<br>
<br>
<h1>如果觉得有帮助的话,欢迎关注我的公众号:小王老店</h1>
<h1>包含详细代码解析和常见问题</h1>
<img src="../common/qrcode.jpg">

<script>
    var player = videojs('my-video');
    player.play();
</script>

</body>
</html>

在本项目中的应用

这边提供一个三种方式的文件夹video,把SAFEWARE_PATH下面的video复制到NGINX_WEB_PATH/html下面,然后启动nginx-web

然后访问

http://127.0.0.1:11240/video/videojs-rtmp-above6/rtmp.html
http://127.0.0.1:11240/video/videojs-m3u8/m3u8.html

出现播放界面就是成功了

流程图

graph LR
A(ffmpeg)-->B(nginx)
B(nginx)-->C(rtmp)
B(nginx)-->D(m3u8)
C(rtmp)-->E(videojs)
D(m3u8)-->E(videojs)

联合测试

到了这里,我们已经确定nginx/ffmpeg/videojs单独拿一个出来都是可以正常运行的了。

现在把这三个串起来,就完成了。

测试rtmp推流播放

打开nginx-Gryphon,使用ffmpeg推送rtmp流,rtmp://192.168.3.134:1935/live/stream,将videojs的rtmp.html中的video-source改成这个地址

测试m3u8推流播放

打开nginx-Gryphon,使用ffmpeg推送m3u8流,http://192.168.3.134:11242/hls/video.m3u8,将videojs的m3u8.html中的video-source 改成这个地址

常见问题

问题1-nginx文件夹无法创建

  • 报错内容:
nginx: [emerg] CreateDirectory() "temp/app" failed (3: The system cannot find the path specified)
  • 原因:无法找到"temp/app"文件夹

  • 解决办法:在nginx的目录下面手动创建一个temp,然后在temp下面创建app

问题2-nginx端口被占用

  • 报错内容:
nginx: [emerg] bind() to 0.0.0.0:11240 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
  • 原因:端口被占用了,

  • 解决办法:这边是11240被占用了,

打开小黑框,输入 netstat -ano | findstr "11240" ,找到占用程序的pid

然后打开任务管理器,切到tab"详细信息",按pid排序,找到进程,关闭

问题3-ffmpeg源路径错误

  • 报错内容:
rtmp://live.hkstv.hk.lxdns.com/live/hks2234: I/O error
  • 原因:视频源无法解析,

  • 解决办法:先试下能不能用vlc播放

问题4-ffmpeg目标路径错误

  • 报错内容:
[tcp @ 000001e4230dfac0] Connection to tcp://192.168.3.134:1935 failed: Error number -138 occurred
[rtmp @ 000001e423a59300] Cannot open connection tcp://192.168.3.134:1935
rtmp://192.168.3.134:1935/hls/video: Unknown error
  • 原因:无法推送到该地址

  • 解决办法:没打开rtmp服务器,看下是否打开了nginx-Gryphon

问题5-videojs无法播放,通用

这里先不说具体的报错,这里说的是一个解决思路,一般都能解决了,具体报错请往下看。

  1. 先确认视频流是可以播放的,使用vlc测试
  2. 再确认videojs代码是可以播放视频的,这里先用cctv/香港卫视等视频源
  3. 注意videojs需要放到web服务器上(tomcat/nginx/iis等),我们这边就是用的nginx,直接从文件夹中打开会出问题(网页地址栏为file:///开头)
  4. rtmp有用到flash,需要在网页中打开flash功能,如图。具体业务逻辑可以在播放器上提示用户打开,可参考风行网

问题6-CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED

  • 报错内容:
VIDEOJS: TypeError: Cannot read property 'play' of undefined
    at Player.techCall_ (video.js:10256)
    at Player.play (video.js:10312)
    at tes2.html:28
video.js:10256 Uncaught TypeError: Cannot read property 'play' of undefined
    at Player.techCall_ (video.js:10256)
    at Player.play (video.js:10312)
    at tes2.html:28
techCall_ @ video.js:10256
play @ video.js:10312
(anonymous) @ tes2.html:28
video.js:18575 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video. MediaError {code: 4, message: "No compatible source was found for this video."}

  • 原因:资源无法加载/未打开flash

  • 解决办法:参考问题5

问题6-CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED

  • 报错内容:
VIDEOJS: TypeError: Cannot read property 'play' of undefined
    at Player.techCall_ (video.js:10256)
    at Player.play (video.js:10312)
    at tes2.html:28
video.js:10256 Uncaught TypeError: Cannot read property 'play' of undefined
    at Player.techCall_ (video.js:10256)
    at Player.play (video.js:10312)
    at tes2.html:28
techCall_ @ video.js:10256
play @ video.js:10312
(anonymous) @ tes2.html:28
video.js:18575 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video. MediaError {code: 4, message: "No compatible source was found for this video."}

  • 原因:网页打开方式不对/资源无法加载/未打开flash等,很多问题都是报的这个错

  • 解决办法:参考问题5

问题6-CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED

  • 报错内容:
VIDEOJS: TypeError: Cannot read property 'play' of undefined
    at Player.techCall_ (video.js:10256)
    at Player.play (video.js:10312)
    at tes2.html:28
video.js:10256 Uncaught TypeError: Cannot read property 'play' of undefined
    at Player.techCall_ (video.js:10256)
    at Player.play (video.js:10312)
    at tes2.html:28
techCall_ @ video.js:10256
play @ video.js:10312
(anonymous) @ tes2.html:28
video.js:18575 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video. MediaError {code: 4, message: "No compatible source was found for this video."}

  • 原因:网页打开方式不对/资源无法加载/未打开flash等,很多问题都是报的这个错

  • 解决办法:参考问题5

问题7-CODE:Uncaught (in promise) DOMException

  • 报错内容:
VIDEOJS: WARN: A plugin named "reloadSourceOnError" already exists. You may want to avoid re-registering plugins!
(anonymous) @ video.js:142
:11240/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
m3u8.html:1 Uncaught (in promise) DOMException	
  • 原因:网页打开方式不对/资源无法加载/未打开flash等,很多问题都是报的这个错

  • 解决办法:参考问题5

问题8-CODE:Cannot read property '0' of undefined

  • 报错内容:
video.js:13002 Uncaught TypeError: Cannot read property '0' of undefined
    at Flash.buffered (video.js:13002)
    at Flash.bufferedPercent (video.js:14878)
    at Flash.<anonymous> (video.js:14835)
    at Flash.ret (video.js:18404)
    at ret (video.js:18404)

解决办法:
video.js文件下面的  Flash.prototype.buffered方法(13002行),把ranges[0][0]改成ranges[0]。
Flash.prototype.buffered = function buffered() {
	var ranges = this.el_.vjs_getProperty('buffered');
	if (ranges.length === 0) {
	  return _utilsTimeRangesJs.createTimeRange();
	}
	// return _utilsTimeRangesJs.createTimeRange(ranges[0][0], ranges[0][1]);
	return _utilsTimeRangesJs.createTimeRange(ranges[0], ranges[0]);
};
  • 原因:videojs6.0一下版本flash的问题

  • 解决办法:

video.js文件下面的  Flash.prototype.buffered方法(13002行),把ranges[0][0]改成ranges[0]。
Flash.prototype.buffered = function buffered() {
	var ranges = this.el_.vjs_getProperty('buffered');
	if (ranges.length === 0) {
	  return _utilsTimeRangesJs.createTimeRange();
	}
	// return _utilsTimeRangesJs.createTimeRange(ranges[0][0], ranges[0][1]);
	return _utilsTimeRangesJs.createTimeRange(ranges[0], ranges[0]);
};