public/static/libs/amazeui/js/wechat.js
搜索:
$(".live-player-warp").show();
改为:
$(".live-player-warp").hide();
继续搜索:
function ck_play(url){
把这一段代码改为:(此版本为手工切换横竖屏)
function ck_play(url){ layer.open({ type: 1, offset: ['10px', '10px'], anim: 5, fixed: false, shade: 0, title: '直播中', area: ['500px', '300px'], content: "<div id=\"video\" style=\"width:100%;height:100%;\"></div><script type=\"text/javascript\">var videoObject = {container: '#video',variable: 'player',flashplayer:false,live:true,video:'" + url + "'};var player=new ckplayer(videoObject);</script>", btn: ['横屏播放', '竖屏播放'], yes: function(index, layero) { $(".layui-layer-btn0").css({"border-color": "#4898d5","background-color": "#2e8ded","color": "#fff"}); $(".layui-layer-btn1").css({"border-color": "#f1f1f1","background-color": "#f1f1f1","color": "#333"}); layer.style(index, {width: '500px',height: '300px'}); return false }, btn2: function(index) { $(".layui-layer-btn1").css({"border-color": "#4898d5","background-color": "#2e8ded","color": "#fff"}); $(".layui-layer-btn0").css({"border-color": "#f1f1f1","background-color": "#f1f1f1","color": "#333"}); layer.style(index, {width: '300px',height: '500px'}); return false } }); }
下面的是自动切换横竖屏版:
function ck_play(url){ layer.open({ type: 1, offset: ['10px', '10px'], anim: 5, fixed: false, shade: 0, title: '直播中', area: ['500px', '300px'], content: "<div id=\"video\" style=\"width:100%;height:100%;\"></div><script type=\"text/javascript\">var videoObject={container:'#video',variable:'player',flashplayer:false,live:true,loaded:'loadedHandler',video:'" + url + "'};var player=new ckplayer(videoObject);function loadedHandler(){player.addListener('loadedmetadata',loadedMetaDataHandler);}function loadedMetaDataHandler(){var metaData=player.getMetaDate();console.log(metaData);var index = parseInt(parent.layer.getFrameIndex(window.name))+1;console.log(index);var width=metaData['streamWidth'];var height=metaData['streamHeight'];if(width/height>=1){layer.style(index,{width:'500px',height:'325px'});return false}else{layer.style(index,{width:'250px',height:'500px'});return false}}</script>" }); }
结果样式就是下面那样的了,可以在聊天窗口内任意拖动拉大,默认在左上角。
仅供参考哈!
都喜欢的话 可以呼吁官方这么改一下下哈哈 不喜欢再研究
横竖屏的尺寸 是随便设置的 具体尺寸 大家自己研究下