308 lines
14 KiB
HTML
308 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="renderer" content="webkit">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>直播订货</title>
|
|
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
|
|
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
|
|
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.7/skins/default/aliplayer-min.css">
|
|
<script src="https://g.alicdn.com/de/prismplayer/2.8.7/aliplayer-min.js" charset="utf-8"></script>
|
|
<script type="text/javascript" charset="utf-8" src="js/aliplayercomponents.min.js"></script>
|
|
<script src="js/function.js"></script>
|
|
<style>
|
|
#player-con {
|
|
display: table-row;
|
|
}
|
|
#player-con video {
|
|
background-color: black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="player-con" class="prism-player"></div>
|
|
</body>
|
|
<script src="layuiadmin/layui/layui.js"></script>
|
|
<script src="js/aliyun-rts-sdk.js"></script>
|
|
<script>
|
|
var global_player
|
|
,global_window_name = window.name
|
|
,global_is_fullscreen = false
|
|
|
|
var aliRts;
|
|
layui.config({
|
|
base: './layuiadmin/'
|
|
}).extend({
|
|
index: 'lib/index'
|
|
}).use(['index', 'user'], function(){
|
|
var $ = layui.$
|
|
,setter = layui.setter
|
|
,admin = layui.admin
|
|
,form = layui.form
|
|
|
|
var url=get_url_param("hzhurl");
|
|
var cate=get_url_param("cate");
|
|
var is_sy = get_url_param("is_sy"),
|
|
username = get_url_param("username")
|
|
var appzbconfig=get_url_param("appzbconfig");
|
|
|
|
$(self.frameElement).parents(".layui-layer-iframe").css("overflow-y", "hidden")
|
|
|
|
//console.log(url);
|
|
var theight=0;
|
|
if(window.screen.width<450){
|
|
theight="160px";
|
|
}else{
|
|
theight="250px";
|
|
}
|
|
theight = "100%"
|
|
if(cate=='zb'){
|
|
if(appzbconfig=="y"){
|
|
global_player = new Aliplayer({
|
|
"id": "player-con",
|
|
"source": decodeURIComponent(url),
|
|
"width": "100%",
|
|
"height": theight,
|
|
"autoplay": true,
|
|
"isLive": true,
|
|
"rePlay": false,
|
|
"playsinline": true,
|
|
"preload": true,
|
|
"controlBarVisibility": 'click',
|
|
"showBarTime": '30000',
|
|
"useH5Prism":true,
|
|
"useFlashPrism":false,
|
|
"liveRetry":3,
|
|
"skinLayout": [
|
|
{
|
|
"name": "bigPlayButton",
|
|
"align": "blabs",
|
|
"x": 30,
|
|
"y": 80
|
|
},
|
|
{
|
|
"name": "infoDisplay"
|
|
},
|
|
{
|
|
"name": "controlBar",
|
|
"align": "blabs",
|
|
"x": 0,
|
|
"y": 0,
|
|
"children": [
|
|
{
|
|
"name": "liveDisplay",
|
|
"align": "tlabs",
|
|
"x": 15,
|
|
"y": 6
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}, function (player) {
|
|
//console.log("画中画播放器创建成功");
|
|
});
|
|
aliRts = new AliRTS()
|
|
var v1=$("#player-con video");
|
|
aliRts.startLiveStream(decodeURIComponent(url),v1[0]);
|
|
// 解决ios不自动播放的问题
|
|
parent.autoPlay_hzh();
|
|
global_player.on("pause", function() {
|
|
aliRts.subscriber.audioManager.element.play()
|
|
aliRts.subscriber.videoManager.element.play()
|
|
})
|
|
|
|
}else{
|
|
|
|
global_player = new Aliplayer({
|
|
"id": "player-con",
|
|
"source": decodeURIComponent(url),
|
|
"width": "100%",
|
|
"height": theight,
|
|
"autoplay": true,
|
|
"isLive": true,
|
|
"rePlay": false,
|
|
"playsinline": true,
|
|
"preload": true,
|
|
"controlBarVisibility": 'click',
|
|
"showBarTime": '30000',
|
|
"useH5Prism":true,
|
|
"useFlashPrism":false,
|
|
"liveRetry":3,
|
|
"skinLayout": [
|
|
{
|
|
"name": "bigPlayButton",
|
|
"align": "blabs",
|
|
"x": 30,
|
|
"y": 80
|
|
},
|
|
{
|
|
"name": "infoDisplay"
|
|
},
|
|
{
|
|
"name": "controlBar",
|
|
"align": "blabs",
|
|
"x": 0,
|
|
"y": 0,
|
|
"children": [
|
|
{
|
|
"name": "liveDisplay",
|
|
"align": "tlabs",
|
|
"x": 15,
|
|
"y": 6
|
|
},
|
|
{
|
|
"name": "volume",
|
|
"align": "tr",
|
|
"x": 5,
|
|
"y": 10
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}, function (player) {
|
|
console.log("画中画播放器创建成功");
|
|
});
|
|
}
|
|
|
|
|
|
} else{
|
|
global_player = new Aliplayer({
|
|
"id": "player-con",
|
|
"source": decodeURIComponent(url),
|
|
"width": "100%",
|
|
"height": theight,
|
|
"rePlay": false,
|
|
"playsinline": true,
|
|
"autoplay": true,
|
|
"preload": true,
|
|
"controlBarVisibility": 'click',
|
|
"showBarTime": '30000',
|
|
"useH5Prism":true,
|
|
"useFlashPrism":false,
|
|
"liveRetry":3,
|
|
"skinLayout": [
|
|
{
|
|
"name": "bigPlayButton",
|
|
"align": "blabs",
|
|
"x": 30,
|
|
"y": 80
|
|
},
|
|
{
|
|
"name": "errorDisplay",
|
|
"align": "tlabs",
|
|
"x": 0,
|
|
"y": 0
|
|
},
|
|
{
|
|
"name": "infoDisplay"
|
|
},
|
|
{
|
|
"name": "controlBar",
|
|
"align": "blabs",
|
|
"x": 0,
|
|
"y": 0,
|
|
"children": [
|
|
{"name":"progress","align":"blabs","x":0,"y":44},
|
|
{"name":"playButton","align":"tl","x":15,"y":12},
|
|
{"name": "volume","align": "tr","x": 10, "y": 10},
|
|
{"name":"timeDisplay","align":"tl","x":10,"y":7},
|
|
// {"name":"fullScreenButton","align":"tr","x":10,"y":10},
|
|
]
|
|
}
|
|
]
|
|
}, function (player) {
|
|
console.log("画中画播放器创建成功");
|
|
player.play()
|
|
})
|
|
$('#player-con .prism-volume').before('<div class="hzh-fullscreen" style="float:right;margin-right:15px; margin-top:10px;height:28px;line-height:28px; "><a href="javascript:viod(0);" style="color:#ffffff;" onclick="show_fullscreen()"><svg t="1582700473916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6096" width="28" height="28"><path d="M960.096 927.914V672.297c0-32.847-32.029-32.847-32.029-32.847s-32.029 0-31.926 32.847v179.075L630.803 587.058c-23.228-23.229-45.843-0.614-45.843-0.614s-22.614 22.614 0.614 45.843l265.03 264.11h-177.64c-32.848 0-32.848 32.028-32.848 32.028s0 32.03 32.848 31.927h255.001s0.511 0 1.432-0.103c10.233-0.511 17.09-4.195 21.592-9.004 4.707-4.503 8.39-11.257 8.902-21.387 0.103-1.023 0.103-1.535 0.103-1.535s0.102-0.102 0.102-0.41zM630.803 436.737l264.11-265.03v177.642c0 32.847 32.029 32.847 32.029 32.847s32.028 0 31.926-32.847V94.346s0-0.51-0.102-1.432c-0.512-10.233-4.196-17.089-9.005-21.591-4.503-4.707-11.256-8.391-21.387-8.903-1.023-0.102-1.535-0.102-1.535-0.102H670.711c-32.847 0-32.847 32.029-32.847 32.029s0 32.029 32.847 31.926h179.075L585.574 391.508c-23.228 23.229-0.614 45.843-0.614 45.843s22.717 22.615 45.843-0.614zM173.088 126.785H350.73c32.848 0 32.848-32.029 32.848-32.029s0-32.029-32.848-31.926H95.728s-0.511 0-1.432 0.102c-10.336 0.512-17.09 4.195-21.592 8.903-4.707 4.502-8.39 11.256-8.902 21.386-0.103 1.023-0.103 1.535-0.103 1.535v256.128c0 32.847 32.03 32.847 32.03 32.847s32.028 0 31.926-32.847V171.809l265.337 264.315c23.229 23.228 45.843 0.613 45.843 0.613s22.615-22.614-0.614-45.843l-265.133-264.11z m218.881 459.761l-264.11 265.03v-177.64c0-32.848-32.028-32.848-32.028-32.848s-32.03 0-31.927 32.848v255.001s0 0.512 0.102 1.433c0.512 10.232 4.196 17.088 9.005 21.59 4.503 4.708 11.256 8.392 21.387 8.903 1.023 0.103 1.535 0.103 1.535 0.103H352.06c32.847 0 32.847-32.03 32.847-32.03s0-32.028-32.847-31.926H172.986l264.212-265.235c23.229-23.228 0.614-45.843 0.614-45.843s-22.717-22.614-45.843 0.614z" fill="#ffffff" p-id="6097"></path></svg></a></div>')
|
|
}
|
|
if (is_sy == "y") {
|
|
$("#player-con").append("<div class='watermark' style='position: absolute; font-size: 64px; color: rgba(183,183,183,0.3); top: 0; left: 0; width: 100%; height: 100%; text-align: center;'><span>"+username+"</span></div>")
|
|
$("#player-con .watermark").css("line-height", $(self.frameElement).height()+"px")
|
|
}
|
|
|
|
$(window.parent).on("resize", function() {
|
|
if (global_is_fullscreen) {
|
|
$(self.frameElement).parents(".layui-layer-iframe").css({
|
|
"width": window.parent.innerWidth+"px"
|
|
,"height": window.parent.innerHeight+"px"
|
|
})
|
|
// $("#player-con .watermark").css("line-height", window.parent.innerHeight+"px")
|
|
} else {
|
|
// console.log($(self.frameElement).parents(".layui-layer-iframe").height())
|
|
// $(self.frameElement).height($(self.frameElement).parents(".layui-layer-iframe").height() - 43)
|
|
// $("#player-con .watermark").css("line-height", ($(self.frameElement).parents(".layui-layer-iframe").height() - 43)+"px")
|
|
}
|
|
})
|
|
$(self.frameElement).parents(".layui-layer-iframe").on("resize", function() {
|
|
$(self.frameElement).height($(this).height()-43)
|
|
$("#player-con .watermark").css("line-height", ($(this).height()-43)+"px")
|
|
})
|
|
|
|
});
|
|
|
|
function show_fullscreen() {
|
|
layui.use(['layer', 'jquery'], function() {
|
|
var $ = layui.jquery
|
|
// iframe全屏（应对视频无法真全屏的设备）
|
|
var index = parent.layer.getFrameIndex(global_window_name); //先得到当前iframe层的索引
|
|
// parent.layer.full(index)
|
|
// 隐藏顶栏
|
|
$(self.frameElement).parents(".layui-layer-iframe").find(".layui-layer-title").hide()
|
|
$(self.frameElement).parents(".layui-layer-iframe").find(".layui-layer-setwin").hide()
|
|
// 视频全屏
|
|
// global_player.fullscreenService.requestFullScreen()
|
|
// 全屏宽高
|
|
$(self.frameElement).parents(".layui-layer-iframe").css({
|
|
"width": window.parent.innerWidth+"px"
|
|
,"height": window.parent.innerHeight+"px"
|
|
})
|
|
$("#player-con .watermark").css("line-height", window.parent.innerHeight+"px")
|
|
$(self.frameElement).parents(".layui-layer-iframe").addClass("hzh-fullscreen")
|
|
// 改全屏控件为退出全屏
|
|
$("#player-con .hzh-fullscreen").remove()
|
|
$('#player-con .prism-volume').before('<div class="hzh-channel-fullscreen" style="float:right;margin-right:15px; margin-top:10px;height:28px;line-height:28px; "><a href="javascript:viod(0);" style="color:#ffffff;" onclick="show_channel_fullscreen()"><svg t="1582700249932" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4554" width="28" height="28"><path d="M682.667 896h256a42.667 42.667 0 0 1 0 85.333h-256a42.667 42.667 0 0 1 0-85.333zM85.333 42.667h256a42.667 42.667 0 1 1 0 85.333h-256a42.667 42.667 0 1 1 0-85.333z" p-id="4555" fill="#ffffff"></path><path d="M981.333 682.667v256a42.667 42.667 0 0 1-85.333 0v-256a42.667 42.667 0 0 1 85.333 0zM128 85.333v256a42.667 42.667 0 1 1-85.333 0v-256a42.667 42.667 0 0 1 85.333 0z m42.667 469.334h256a42.667 42.667 0 0 1 0 85.333h-256a42.667 42.667 0 0 1 0-85.333zM597.333 384h256a42.667 42.667 0 0 1 0 85.333h-256a42.667 42.667 0 0 1 0-85.333z" p-id="4556" fill="#ffffff"></path><path d="M72.832 875.648l290.816-290.816a42.667 42.667 0 1 1 60.33 60.33L133.164 935.98a42.667 42.667 0 1 1-60.331-60.331z m501.12-482.901L891.733 74.965a42.667 42.667 0 0 1 60.331 60.331L634.283 453.077a42.667 42.667 0 1 1-60.331-60.33z" p-id="4557" fill="#ffffff"></path><path d="M469.333 597.333v256a42.667 42.667 0 0 1-85.333 0v-256a42.667 42.667 0 0 1 85.333 0zM640 170.667v256a42.667 42.667 0 0 1-85.333 0v-256a42.667 42.667 0 1 1 85.333 0z" p-id="4558" fill="#ffffff"></path></svg></a></div>')
|
|
global_is_fullscreen = true
|
|
})
|
|
}
|
|
function show_channel_fullscreen() {
|
|
layui.use(['layer', 'jquery'], function() {
|
|
var $ = layui.jquery
|
|
// iframe全屏（应对视频无法真全屏的设备）
|
|
var index = parent.layer.getFrameIndex(global_window_name); //先得到当前iframe层的索引
|
|
// 退出全屏
|
|
// global_player.fullscreenService.cancelFullScreen()
|
|
// 显示顶栏
|
|
$(self.frameElement).parents(".layui-layer-iframe").find(".layui-layer-title").show()
|
|
$(self.frameElement).parents(".layui-layer-iframe").find(".layui-layer-setwin").show()
|
|
|
|
$(self.frameElement).parents(".layui-layer-iframe").removeClass("hzh-fullscreen")
|
|
|
|
if (window.screen.width < 450){
|
|
$(self.frameElement).parents(".layui-layer-iframe").css({
|
|
"width": "280px"
|
|
,"height": "210px"
|
|
,"top": (window.parent.innerHeight - 210)+"px"
|
|
,"left": (window.parent.innerWidth - 280)+"px"
|
|
})
|
|
} else {
|
|
$(self.frameElement).parents(".layui-layer-iframe").css({
|
|
"width": "400px"
|
|
,"height": "300px"
|
|
,"top": (window.parent.innerHeight - 300)+"px"
|
|
,"left": (window.parent.innerWidth - 400)+"px"
|
|
})
|
|
}
|
|
$(self.frameElement).height($(self.frameElement).parents(".layui-layer-iframe").height() - 43)
|
|
$("#player-con .watermark").css("line-height", ($(self.frameElement).parents(".layui-layer-iframe").height() - 43)+"px")
|
|
|
|
// 改退出全屏控件为全屏
|
|
$("#player-con .hzh-channel-fullscreen").remove()
|
|
$('#player-con .prism-volume').before('<div class="hzh-fullscreen" style="float:right;margin-right:15px; margin-top:10px;height:28px;line-height:28px; "><a href="javascript:viod(0);" style="color:#ffffff;" onclick="show_fullscreen()"><svg t="1582700473916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6096" width="28" height="28"><path d="M960.096 927.914V672.297c0-32.847-32.029-32.847-32.029-32.847s-32.029 0-31.926 32.847v179.075L630.803 587.058c-23.228-23.229-45.843-0.614-45.843-0.614s-22.614 22.614 0.614 45.843l265.03 264.11h-177.64c-32.848 0-32.848 32.028-32.848 32.028s0 32.03 32.848 31.927h255.001s0.511 0 1.432-0.103c10.233-0.511 17.09-4.195 21.592-9.004 4.707-4.503 8.39-11.257 8.902-21.387 0.103-1.023 0.103-1.535 0.103-1.535s0.102-0.102 0.102-0.41zM630.803 436.737l264.11-265.03v177.642c0 32.847 32.029 32.847 32.029 32.847s32.028 0 31.926-32.847V94.346s0-0.51-0.102-1.432c-0.512-10.233-4.196-17.089-9.005-21.591-4.503-4.707-11.256-8.391-21.387-8.903-1.023-0.102-1.535-0.102-1.535-0.102H670.711c-32.847 0-32.847 32.029-32.847 32.029s0 32.029 32.847 31.926h179.075L585.574 391.508c-23.228 23.229-0.614 45.843-0.614 45.843s22.717 22.615 45.843-0.614zM173.088 126.785H350.73c32.848 0 32.848-32.029 32.848-32.029s0-32.029-32.848-31.926H95.728s-0.511 0-1.432 0.102c-10.336 0.512-17.09 4.195-21.592 8.903-4.707 4.502-8.39 11.256-8.902 21.386-0.103 1.023-0.103 1.535-0.103 1.535v256.128c0 32.847 32.03 32.847 32.03 32.847s32.028 0 31.926-32.847V171.809l265.337 264.315c23.229 23.228 45.843 0.613 45.843 0.613s22.615-22.614-0.614-45.843l-265.133-264.11z m218.881 459.761l-264.11 265.03v-177.64c0-32.848-32.028-32.848-32.028-32.848s-32.03 0-31.927 32.848v255.001s0 0.512 0.102 1.433c0.512 10.232 4.196 17.088 9.005 21.59 4.503 4.708 11.256 8.392 21.387 8.903 1.023 0.103 1.535 0.103 1.535 0.103H352.06c32.847 0 32.847-32.03 32.847-32.03s0-32.028-32.847-31.926H172.986l264.212-265.235c23.229-23.228 0.614-45.843 0.614-45.843s-22.717-22.614-45.843 0.614z" fill="#ffffff" p-id="6097"></path></svg></a></div>')
|
|
global_is_fullscreen = false
|
|
})
|
|
}
|
|
|
|
</script>
|
|
</html> |