playback.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. {extend name="public/layout" /} {block name="title"}创建直播{/block} {block name="body"}
  2. <link rel="stylesheet" href="__STATIC__/css/csspc.css">
  3. <style type="text/css">
  4. html {
  5. background: #fff;
  6. }
  7. body {
  8. min-width: 320px;
  9. }
  10. @media screen and (max-width: 450px) {
  11. .layui-form-item {
  12. width: 100%;
  13. }
  14. }
  15. .addlistli .layui-form-label{width:130px;}
  16. .addlistli .layui-input-inline{width:520px;}
  17. .addlistli .layui-form-select{width: 100%;}
  18. .colorRed {
  19. color: red;
  20. }
  21. #symbshowed {
  22. margin-top: 6px;
  23. }
  24. </style>
  25. <body>
  26. <form class="layui-form">
  27. <div class="layui-form-item mdt20 addlistli">
  28. <label class="layui-form-label"><span style="color: red;">*</span>上传封面 :</label>
  29. <div class="layui-input-inline" id="upload-drag0">
  30. {if condition="$data.playback_cover"}
  31. <img src="{$data.playback_cover}" width="383px" height="114px">
  32. {else /}
  33. <div class="layui-upload-drag">
  34. <i class="layui-icon">&#xe681;</i>
  35. <p>选择封面图片</p>
  36. </div>
  37. {/if}
  38. </div>
  39. <div class="clear"></div>
  40. <div class="mdl130 mdt10">
  41. <i style="color: #FF5722;">* </i>建议上传图片宽高比例5:3,图片大小不超过1M
  42. </div>
  43. </div>
  44. <div class="layui-form-item addlistli">
  45. <label class="layui-form-label"><span class="colorRed">*</span>上传视频</label>
  46. <div class="layui-input-inline" style="width: 290px;display: block;" id="container">
  47. <a class="layui-btn btn" id="selectfiles" href="javascript:void(0);" >选择视频</a>
  48. <a class="layui-btn btn" id="postfiles" href="javascript:void(0);">开始上传</a>
  49. <div id="ossfile"></div>
  50. <div id="symbshowed">
  51. {if condition="$data.playback_url"}
  52. <video src="{$data.playback_url}" controls="controls"></video>
  53. {/if}
  54. </div>
  55. <!--报错信息返回展示-->
  56. <pre id="console"></pre>
  57. <input type="hidden" value="{$data.video_url}" id="fileuri">
  58. <!--上传到OSS哪个文件下,在这里定义-->
  59. <input type="hidden" value="Video" id="category_name">
  60. </div>
  61. </div>
  62. <div class="layui-form-item videolimit addlistli">
  63. <label class="layui-form-label"></label>
  64. <div><i style="color:red;margin-right:5px;">*</i><span id="limitVA">上传视频大小不超过280M</span></div>
  65. </div>
  66. <div class="layui-form-item mdt80 mdb30 addlistli">
  67. <input type="button" lay-submit class="layui-btn layui-btn-normal width20_ wright mdr10_" lay-filter="live_submit" id="live_submit" value="确认添加">
  68. </div>
  69. </form>
  70. </body>
  71. {/block} {block name="js"}
  72. <script type="text/javascript" src="__STATIC__/js/plupload/js/plupload.full.min.js"></script>
  73. <script type="text/javascript" src="__STATIC__/js/plupload/ossupload.js"></script>
  74. <script>
  75. layui.config({
  76. base: '__LAYUI__/',
  77. urlbase: '/sys'
  78. }).extend({
  79. index: 'lib/index' //主入口模块
  80. }).use(['index', 'form', 'upload', 'layedit', 'laydate'], function () {
  81. var form = layui.form,
  82. upload = layui.upload,
  83. layedit = layui.layedit,
  84. laydate = layui.laydate,
  85. $ = layui.jquery;
  86. form.render();
  87. laydate.render({
  88. elem: '#livedate'
  89. ,type: 'datetime'
  90. ,range: true
  91. ,trigger: 'click'//呼出事件改成click
  92. });
  93. /* 监听提交 */
  94. form.on('submit(live_submit)', function (obj) {
  95. var index = parent.layer.getFrameIndex(window.name);
  96. var formData = new FormData(obj.form);
  97. var cover = '';
  98. formData.forEach((value, key) => {
  99. if (key == 'cover') {
  100. cover = value;
  101. }
  102. })
  103. if (cover.name == '') {
  104. layer.msg('请选择封面', {
  105. anim: 6
  106. , time: 2000
  107. });
  108. return false;
  109. }
  110. let videoUrl = $("#fileuri").val();
  111. if (!videoUrl) {
  112. layer.msg('请选择视频', {
  113. anim: 6
  114. , time: 2000
  115. });
  116. return false;
  117. }
  118. formData.set('playback_url', videoUrl);
  119. // 单击之后提交按钮不可选,防止重复提交
  120. $.ajax({
  121. url: '{:url("boss/savePlayback")}',
  122. type: 'post',
  123. data: formData,
  124. dataType: 'json',
  125. processData: false,
  126. contentType: false,
  127. success: function (res) {
  128. if (res.code === 0) {
  129. var DISABLED = 'layui-btn-disabled';
  130. var target = '#activity-submit';
  131. $(target).addClass(DISABLED);
  132. $(target).attr('disabled', 'disabled');
  133. layer.msg(res.msg, {
  134. anim: 0
  135. , time: 2000
  136. }, function () {
  137. parent.layui.table.reload('company-activity'); //重载表格
  138. parent.layer.close(index); //再执行关闭
  139. });
  140. } else {
  141. layer.msg(res.msg, {
  142. anim: 6
  143. , time: 2000
  144. });
  145. }
  146. }
  147. });
  148. return false;
  149. });
  150. //拖拽上传
  151. upload.render({
  152. elem: '#upload-drag0',
  153. accept: 'image',
  154. exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
  155. auto: false,
  156. field: 'playback_cover',
  157. size: 1 * 1024,
  158. choose: function (obj) {
  159. obj.preview(function (index, file, result) {
  160. $('#upload-drag0').html('<img src="' + result + '" style="width:355px !important;height:160px !important;">');
  161. });
  162. }
  163. });
  164. });
  165. </script>
  166. {/block}