live.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title><{$info['name']}> - <{$config['name']}></title>
  7. <link href="css/global.css?v=d4ecd76d" rel="stylesheet"><link href="css/live.css?v=d4ecd76d" rel="stylesheet"></head>
  8. <body>
  9. <header style="display:none;">
  10. <a class="back" style="display:none;"></a>
  11. <{$config['name']}>
  12. </header>
  13. <div class="main">
  14. <!--视频-->
  15. <div class="banner">
  16. <div class="poster">
  17. <img src="<{$info['pic_cover_169']}>"
  18. alt="" class="media-cover">
  19. <{if($info['status'] != 1):}>
  20. <div class="ico-video-play"></div>
  21. <{endif}>
  22. </div>
  23. <div class="video-cont">
  24. <video class="video-js" id="demo-video"></video>
  25. </div>
  26. <a class="btn-open" href="<{$app}>" style="display:none;">打开JSTYLE精美APP,查看更多精彩直播>></a>
  27. </div>
  28. <h1 class="h1"><{$info['name']}></h1>
  29. <{if($info['status'] == 1 || $info['status'] == 3):}>
  30. <!-- 直播未开始/直播结束 -->
  31. <div class="unliving">
  32. <{if($info['status'] == 1):}>
  33. <!-- 未开始 -->
  34. <div class="live-forecast"><span>本次直播将于<{$info['sdate_time']}>开始</span></div>
  35. <a class="app-open" href="<{$app}>">打开JSTYLE精美APP,开启直播提醒</a>
  36. <{elseif($info['status'] == 3):}>
  37. <!-- 已结束 -->
  38. <a class="app-open" href="<{$app}>">打开JSTYLE精美APP,查看更多精彩直播</a>
  39. <{endif}>
  40. <div class="rich-wrapper">
  41. <!--段落-->
  42. <{$info['content']}>
  43. </div>
  44. </div>
  45. <{elseif($info['status'] == 2):}>
  46. <!-- 直播中 -->
  47. <div class="living" >
  48. <div class='living-tabs'>
  49. <div data-tabid='1' class='cur'>在线互动</div>
  50. <div data-tabid='2'>直播介绍</div>
  51. </div>
  52. <{if(isset($comment) && $comment && in_array(2, $info['function'])):}>
  53. <div class='message' tab-type="living-tab" tabid="1">
  54. <{loop($comment):}>
  55. <div class='item'>
  56. <div class='user'>
  57. <img src='<{isset($v['avatar']) ? $v['avatar'] : ""}>' />
  58. </div>
  59. <div class='info clearfix'>
  60. <div class='username text-ellipsis'>
  61. <span><{$v['username']}></span>
  62. </div>
  63. <div class='txt'>
  64. <span>
  65. <{$v['content']}>
  66. </span>
  67. </div>
  68. </div>
  69. </div>
  70. <{endloop}>
  71. <a class="app-open" href="<{$app}>">打开JSTYLE精美APP,查看全部评论</a>
  72. </div>
  73. <{endif}>
  74. <div class="rich-wrapper" tab-type="living-tab" tabid="2" style="display:none;">
  75. <{$info['content']}>
  76. </div>
  77. </div>
  78. <{endif}>
  79. </div>
  80. <dl class="fixed-app-open">
  81. <dt>
  82. <img src="images/logo.png" alt="">
  83. <div>
  84. <h3>JSTYLE精美</h3>
  85. <span>我的时尚指南</span>
  86. </div>
  87. </dt>
  88. <dd>
  89. <a href="<{$app}>">打开APP</a>
  90. </dd>
  91. </dl>
  92. <script type="text/javascript" src="js/global.js?v=d4ecd76d"></script><script type="text/javascript" src="js/live.js?v=d4ecd76d"></script></body>
  93. <{Dever::render('share', $this->data)}>
  94. <script>
  95. var videos = '';
  96. <{if($info['status'] == 2):}>
  97. videos = '<{$info['stream_rtmp']}>';
  98. <{elseif($info['status'] == 3):}>
  99. videos = '<{$info['url']}>';
  100. <{endif}>
  101. $('.ico-video-play').click(function(){
  102. $('.video-cont').show();
  103. $('.poster').hide();
  104. var player = $('#demo-video')[0];
  105. player.src = videos;
  106. player.load();
  107. player.play();
  108. player.addEventListener('pause', function () {
  109. $('.video-cont').hide();
  110. $('.poster').show();
  111. },false);
  112. player.addEventListener('ended', function () {
  113. $('.video-cont').hide();
  114. $('.poster').show();
  115. },false);
  116. })
  117. </script>
  118. <script>
  119. $('.living-tabs').on('click', 'div', function () {
  120. var tabid = $(this).data('tabid');
  121. $(this).addClass('cur').siblings().removeClass('cur');
  122. $('[tab-type="living-tab"]').hide().filter('[tabid="'+tabid+'"]').show();
  123. })
  124. </script>
  125. </html>