分享
  • 收藏
  • 举报
    X
    PC直播播放器样式预览第一款 新增横竖屏切换 又一次升级啦 自动切换横竖屏
    1751
    18

    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>"
       
    });
    }


    结果样式就是下面那样的了,可以在聊天窗口内任意拖动拉大,默认在左上角。

    仅供参考哈!

    都喜欢的话 可以呼吁官方这么改一下下哈哈 不喜欢再研究

    横竖屏的尺寸 是随便设置的 具体尺寸 大家自己研究下


    9
    赏礼
    赏钱
    收藏
    点击回复
        全部留言
    • 18
    • Suifeng 程序开发者 消费:23.24元 2019-12-09 09:47 09:476楼
      又升级啦 支持自动判断 手机横竖屏直播啦
      xaozi 消费:0.22元 2019-12-09 09:56
      太好了,自动才是关键
    0 赏钱 赏礼回复
    • 银杏114在线 实战运营者 消费:3609.79元 2019-12-08 21:51 21:516楼
      牛B中的战斗机
    0 赏钱 赏礼回复
    • 奋斗 普通粉丝 消费:11元 2019-12-08 21:12 21:126楼
      膜拜大神
    0 赏钱 赏礼回复
    • 素之美 风格开发者 消费:495.25元 2019-12-08 16:40 16:406楼
      啥都不说了,就是打赏。
      Suifeng 消费:23.24元 2019-12-08 16:43
      其实也有不完美的地方 比如横竖屏判断什么的 现在没有响应的函数 如果播放视频可以判断出来 直播不好判断
      素之美 消费:495.25元 2019-12-08 16:44
      @Suifeng 慢慢搞先,你搞个实例大伙也方便参考学习。
      午夜梦寒 消费:1817.13元 2019-12-08 16:59
      横竖屏不好判断,可以加个按钮开关来手动控制啊。
      Suifeng 消费:23.24元 2019-12-08 17:55
      @毛乘风13205905096 这个建议很赞 已经加上了
      DONG 消费:6277.74元 iPhone 2019-12-08 18:20
      @Suifeng 把这个横竖屏切换的按钮并为一个,变成电脑端图片就看软件的那个旋转90度的按钮就好。
      Suifeng 消费:23.24元 2019-12-08 18:22
      @DONG 臣妾做不到啊,需要js高手来了
      DONG 消费:6277.74元 iPhone 2019-12-08 18:23
      @Suifeng 爱妃可以的
      万荀网 消费:6824元 2019-12-08 18:42
      @Suifeng 放到上面的直播中那一栏你肯定做得到
      午夜梦寒 消费:1817.13元 2019-12-08 19:10
      我最关心的是这个更新啥时出来可以真正体验
      笨熊 消费:791.82元 华为 2019-12-08 20:50
      @Suifeng 谁直播让他有个横屏竖屏的选择
      Suifeng 消费:23.24元 2019-12-08 20:52
      @笨熊 这个可以去掉的 不影响 本身就可以放大缩小 拉伸 拖拽了 加个横竖只是看着好看一点点
    0 赏钱 赏礼回复
    • 午夜梦寒 实战运营者 消费:1817.13元 2019-12-08 16:58 16:586楼
      大侠出手 ,就是不一样
    0 赏钱 赏礼回复
    • weiqian 普通粉丝 消费:0.7元 2019-12-08 16:48 16:486楼
      很棒.大家
    0 赏钱 赏礼回复
    更多回复
    恢复多功能编辑器
  • 3 1
  • 推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648