使用videojs播放rtmp视频

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30152271/article/details/84334734

！！注意以下几点：

一定要把代码放到服务器上运行，然后访问index.html，不可本地打开使用。
demo使用的video.js版本是5.5.3，其他版本我还没进行测试，大家可以自己去试试。videojs官网
亲测在谷歌，ie9以上浏览器都可以正常播放，ie8还有点问题。
截止我写博客时我用的rtmp视频源是可用的，如果大家发现无法播放，可以试试其他的视频源，这里提供几个，仅供参考：
香港卫视,rtmp://live.hkstv.hk.lxdns.com/live/hks
香港财经,rtmp://202.69.69.180:443/webcast/bshdlive-pc
韩国GoodTV,rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
韩国朝鲜日报,rtmp://live.chosun.gscdn.com/live/tvchosun1.stream
美国1,rtmp://ns8.indexforce.com/home/mystream
美国2,rtmp://media3.scctv.net/live/scctv_800
美国中文电视,rtmp://media3.sinovision.net:1935/live/livestream
湖南卫视,rtmp://58.200.131.2:1935/livetv/hunantv
主要的代码如下所示：

```
<!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="http://vjs.zencdn.net/5.5.3/video.js"></script>
<link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
</head>
<body>
<div class="openFlashTips" style="width:300px;position:absolute;top:20px;left:225px;z-Index:9999;color:white">视频无法正常播放，请点击下方启用flash</div>
<video id="my-video" style="color:black;width:750px;height:350px" class="video-js" autoplay controls preload="auto" width="750" height="350" data-setup="{}"><source src='rtmp://58.200.131.2:1935/livetv/hunantv' type='rtmp/flv'/>
</video>
<embed width="300" height="70" class="openFlash" style="position:absolute;top:130px;left:225px;z-Index:9999;" type="application/x-shockwave-flash">
<script type="text/javascript" language="JavaScript">function flashChecker() {var hasFlash = 0;         //是否安装了flashvar flashVersion = 0; //flash版本var isIE = /*@cc_on!@*/0;      //是否IE浏览器if (isIE) {var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');if (swf) {hasFlash = 1;VSwf = swf.GetVariable("$version");flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);}} else {if (navigator.plugins && navigator.plugins.length > 0) {var swf = navigator.plugins["Shockwave Flash"];if (swf) {hasFlash = 1;var words = swf.description.split(" ");for (var i = 0; i < words.length; ++i) {if (isNaN(parseInt(words[i]))) continue;flashVersion = parseInt(words[i]);}}}}return {f: hasFlash, v: flashVersion};}var fls = flashChecker();var s = "";if (fls.f) {document.getElementsByClassName("openFlash")[0].style.display = "none";document.getElementsByClassName("openFlashTips")[0].style.display = "none";
//        document.write("您安装了flash,当前flash版本为: " + fls.v + ".x");}else {document.getElementsByClassName("openFlash")[0].style.display = "block";document.getElementsByClassName("openFlashTips")[0].style.display = "block";
//        document.write("您没有安装flash");}
</script>
</body>
</html>

vue使用组件

import React, { Component } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.min.css';
import "./live.less";
var ActiveXObject=window.ActiveXObject;
class Live extends Component {constructor(props){super(props);}componentDidMount() {//判断浏览器是否有flash插件var isIE=false;if(window.ActiveXObject){isIE=true;}var has_flash=false;try{if(isIE){var flash=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");has_flash=true;}else{var flash=navigator.plugins["Shockwave Flash"];if(flash){has_flash=true;}}}catch (e) {console.log(e);}if(has_flash){var _this=this;//在局域网不能播放，添加的代码，引入的路径必须是用require引入(使用本地的swf或者                    node_modules里面的都是可以的)，不是局域网的就不用写这行代码，videojs.options.flash.swf = require('videojs-swf/dist/video-js.swf');// videojs.options.flash.swf = require("本地地址路径");this.player = videojs(this.videoNode, {preload: 'auto',// 预加载bigPlayButton: {},// 大按钮controls: true,// 是否开启控制栏width: 850,// 播放器宽度height: 600,// 播放器高度playbackRates: [1, 1.5, 2],muted: true, //是否静音loop : false, //是否循环播放autoplay:true, //是否自动播放techOrder: ["flash"],//设置flash播放language: "zh-CN",}, function onPlayerReady() {if(_this.props.videostreaming){this.src({src: "直播地址”,type:'rtmp/flv'})}});}componentWillUnmount() {if (this.player) {this.player.dispose();}}render() {return(<div data-vjs-player><video ref={ node => this.videoNode = node } className="video-js vjs-big-play-centered" id="myvideo" poster={flash}></video></div>);}
}
export default Live;

在局域网不能播放，添加的代码，引入的路径必须是用require引入(使用本地的swf或者node_modules里面的都是可以的)，不是局域网的就不用写这行代码，
videojs.options.flash.swf = require(‘videojs-swf/dist/video-js.swf’);

我使用的是video.js@5.8.2版本，之前使用的是video.js@5.20.4，这个版本静音和播放放大直播画面，鼠标放上去显示英文，video.js@5.8.2是没有的，看自己的需求了

使用videojs播放rtmp视频相关推荐

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流
场景 Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg): Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)_BADAO_ ...
使用videojs播放m3u8视频
vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库,可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频.流媒体传输协议(hls) ...
video.js播放rtmp视频
最近公司要求拉取某公司流媒体服务器的视频监控,并在web端页面播放,流媒体服务器发送的是rtmp格式视频流,经过网上查资料,最后敲定使用video.js rtmp流需要依托flash播放,现在大多浏览 ...
使用videojs播放m3u8视频监控。
一 . 实现过程中解决的问题 : 1. 全屏播放 2.切换页面后进入视频无法再次播放,解决方法利用生命周期函数beforeDestroy或onUnload里面销毁创建的video实例. 二.主要代码: ...
VideoJS播放hls视频
代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)...
前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...
h5 rtmp推荐控件_H5播放Rtmp之videojs播放
一.简介我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所 ...
React使用Video.js播放rtmp，hls视频
公司最近项目需要实时播放摄像头传入的视频,支持rtmp,hls,rtsp格式视频.于是开始封装了一个简单的视视频播放器,刚开始使用的React-palyer但是React-player好像不支持rtm ...
ckplayer在播放FMS　rtmp视频地址时跟普通的的地址调用是一样的
怎样播放rtmp视频地址以及使用fms搭建rtmp环境 2013-08-23 23:17木夏ewJK6 | 分类:常见软件|浏览438次分享到: 2013-08-23 23:37提问者采纳 ckpl ...
videojs动态更换视频源
在使用videojs播放rtmp直播流时,遇到的问题记录: src中的type可以不指定,若指定则不能错.hls的为mpegts流,type为'application/x-mpegURL' rtmp的 ...

使用videojs播放rtmp视频

使用videojs播放rtmp视频相关推荐

最新文章

热门文章