版权声明:本文为博主原创文章,遵循 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; //是否安装了flash
var 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是没有的,看自己的需求了