在(一)中获取到播放地址,可直接在我们微信的项目中播放直播。
php控制器方法判断访问来自ios/安卓/电脑.
// 判断
if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')||strpos($_SERVER['HTTP_USER_AGENT'], 'iPad')){
// echo 'ios';
}else if(strpos($_SERVER['HTTP_USER_AGENT'], 'Android')){
// echo 'Android';
}else{
// echo 'other';
}
根据控制器方法判断来显示页面。
iOS端
src选取播放地址中的HLS
//1.body内容
<video id="myPlayer" >
<source src="" type="application/x-mpegURL"/>
</video>
//2.引入微信js内容
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
//3.在JS中监听,自动播放
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('myPlayer').play();
}, false);
安卓端
// src选择播放地址中的rmtp
<video id="ipcStreamVideo" controls="controls" autoplay="true" x-webkit-airplay="allow" webkit-playsinline>
<source src=""type="application/vnd.apple.mpegurl"/>
</video>
电脑浏览器访问
// 1.引入文件
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.8.4/video.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
// 2.src选择播放地址中的rmtp
<video id="my-player" data-setup='{}' class="video-js" autoplay='true'muted='true'>
<source src="" id="my-source" type="rtmp/flv"></source>
<p class="vjs-no-js">浏览器不支持,请更换最新浏览器</p>
</video>
// 3.js
var nrl = window.location.search;
console.log('rtmp frame page location search:', nrl);
if (nrl) {
var srl = nrl.substring(5);
var mw = window.innerWidth
var mh = window.innerHeight
console.log('home url w-h:', mw, mh)
var myer = videojs('my-player')
myer.width(mw)
myer.height(mh)
myer.src({ type: 'rtmp/flv', src: srl})
setTimeout(() => {
console.log('in time out srl:', srl)
myer.play()
}, 300);
}