videojs能播放mp4,不能播放rtmp流的问题解决_video.js 播放mp4-程序员宅基地

技术标签: rtmp  Videojs  音视频  前端  

最近给了一个小任务是要验证下videojs播放rtmp流的问题。

 

我先是在 http://www.jq22.com/jquery-info404 《视频播放插件Video.js》下载了

根据它提供的demo修改代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 5.18.4</title>
	<link href="css/video-js.css" rel="stylesheet">
	<!-- If you'd like to support IE8 -->
	<script src="js/videojs-ie8.min.js"></script>
	<style>
		body{background-color: #191919}
		.m{ width: 640px; height: 264; margin-left: auto; margin-right: auto; margin-top: 100px; }
	</style>
</head>

<body>
	<div class="m">
		<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
		  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
			<source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv"/>  
			<p class="vjs-no-js">
			  To view this video please enable JavaScript, and consider upgrading to a web browser that
			  <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
			</p>
		  </video>
		  <script src="http://vjs.zencdn.net/5.18.4/video.min.js"></script>	
		  <script type="text/javascript">
			var myPlayer = videojs('my-video');
			videojs("my-video").ready(function(){
				var myPlayer = this;
				myPlayer.play();
			});
		</script>
	</div>

</body>
</html>

运行发现无法成功播放,之前用它的demo播放mp4文件是可以的,排除了代码问题、路径问题、浏览器不支持问题、flash问题(这些问题大家自行百度),后来发现是因为:video.js不支持在本地html页面里播放

于是根据这篇文章:https://blog.csdn.net/u011456337/article/details/50704331 

3分钟快速搭建nodejs本地服务器运行测试html/js》     感谢“罗星星的博客”的帮助。

搭建了本地服务器,成功实现了videojs播放rtmp流

问题解决!

 

另外,我之前下的是下面这个版本:

 

 

这个版本就算按照上面的操作了也不能播放,是因为(V6.X.X的都播不了rtmp,V5.x.x的才行,对比发现,V6.X.X目录下没有video-js.swf,rtmp需要flash来播 

具体看:

http://blog.videojs.com/Video-js-removes-Flash-from-core-player/

 

 

 

 

本人近期专注写论文,没有再弄这个方面的东西了

附上本文文件下载:

https://share.weiyun.com/5ynrKTT 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/baienguon/article/details/80985973

智能推荐

聊聊Flink DataStream的八种物理分区逻辑-程序员宅基地

文章浏览阅读875次。这两天正在折腾ClickHouse,折腾完再写文章记录,今天就先弄一篇关于Flink的小知识吧。DataStream分区Spark的RDD有分区的概念,Flink的DataStream同样也有,只不过没有RDD那么显式而已。Flink通过流分区器StreamPartitioner来控制DataStream中的元素往下游的流向,以StreamPartitioner抽象类为中心的类..._flink datastream分类

BR/EDR控制器: 链接管理协议LMP(Link Manager protocol)_蓝牙link management protocol-程序员宅基地

文章浏览阅读443次。这里写目录标题一级目录二级目录三级目录一级目录二级目录三级目录_蓝牙link management protocol

Vue2.0+组件库总结-程序员宅基地

文章浏览阅读142次。本文转自: https://www.cnblogs.com/jearay/p/8580958.html,很遗憾链接无法复制,有兴趣的朋友请参考原URL。UI组件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI..._vue baidu map 本地检索组件

运行 FreeSWITCH-程序员宅基地

文章浏览阅读194次。我建了一个 Freeswitch 内核研究 交流群, 45211986, 欢迎加入, 另外,提供基于SIP的通信服务器及客户端解决方案。读到本章,你应该对 FreeSWITCH 有了一个比较全面的了解,迫切地想实验它强大的功能了。让我们从最初的运行开始,一步一步进入 FreeSWITCH 的神秘世界。命令行参数一般来说,FreeSWITC..._运行freeswitch

文件输入、复制、选择输出_#include <stdio.h> #include <stdlib.h> #define siz-程序员宅基地

文章浏览阅读193次。#include<stdio.h>#include<stdlib.h>#define SIZE 3struct Student_type{ char name[10]; int num; int age; char addr[15];}stud[SIZE];int i,LEN;void save();void load();void screen();int main(){ save(); load(); screen(); return 0;_#include #include #define size 3 struct student_type {c

linux boa WEB服务器移植安装与使用-程序员宅基地

文章浏览阅读1.1k次。嵌入式Linux上通过boa服务器实现cgi/html的web上网简介:第一步 Boa程序的移植1.下载Boa源码2、生成Makefile文件3、修改Makefile文件4、编译第二步 Boa的配置第三步boa的执行1.将根文系统ramdisk在电脑主机上mount –o loop ramdisk 目标目录进行展开 2.测试操作3.将ramdisk文件重

随便推点

OpenGL ES 资源整理_刮刮卡 opengl_ccwwff的博客-程序员宅基地

文章浏览阅读254次。NDK_OpenGLES_3_0https://github.com/githubhaohao/NDK_OpenGLES_3_0Android OpenGL ES显示3D模型https://blog.csdn.net/zxc123e/article/details/53585399OpenGL ES——导入.stl格式的3D模型https://www.jianshu.com/p/34ed1cf2a214Android OpenGL显示任意3D模型文件https://blog.csdn.net/s_刮刮卡 opengl

wangEditor直接粘贴图片实现-程序员宅基地

文章浏览阅读1.7k次。很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴到 富文本编辑器里面方法一:工具/原料百度doc任意富文本编辑器,以UEDdito为例方法/步骤登录,http://word.baidu.com点击右上角 导入文档,如图所示导入后,系统会自动将word的内容加载进去。此时 点击右上角编辑,Ctrl+A复制所有内容

NSTableView Storyboard使用-程序员宅基地

文章浏览阅读626次。NSTableView不会自己存储数据,而是从一个数据源取数据,而这个数据源是要实现NSTableViewDataSource Protocol的方法,而NSTableView的行为则需要实现NSTableViewDelegate Protocol,比如鼠标双击表格,选中表格哪一行等事件,而这些都不需要通过继承NSTableView来重新实现,只需要通过这个协议重写。NSTableViewDa...

java算法_兔子的规律为数列1,1,2,3,5,8,13,21....-程序员宅基地

文章浏览阅读1.7k次,点赞5次,收藏14次。1.程序分析: 兔子的规律为数列1,1,2,3,5,8,13,21…package cn.edu.hit;/**兔子问题斐波那契数列求值@author tonylp*题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,*小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少?1.程序分析: 兔子的规律为数列1,1,2,3,5,8,..._兔子的规律为数列1,1,2,3,5,8,13,21....

C/C++代码跟踪_c/c++应用程序动态跟踪-程序员宅基地

文章浏览阅读1.6k次。C/C++编译器的预处理器定义了一些名字:__FILE__,__LINE__,__FUNCTION__,__DATE__,__TIME__等。 顾名思义: __FILE__:表示当前文件的文件名(含绝对路径)。 __LINE__:表示当前行号。 __FUNCTION__:表示当前函数名字(不包括返回值和实参,仅仅是函数名) __DATE__:表示预编译的日期吧_c/c++应用程序动态跟踪

微信开发系列(四)_获取accessToken-程序员宅基地

文章浏览阅读691次。之前介绍的token是为了验证服务器地址的可用性(可随便填写 一次连接成功之后不再有用)现在的accessToken是通过appId和appSecret获取的