kailin/resources/views/admin/video_course/add.blade.php

@extends('admin.public.base')
@section('body_class')
style="margin: 0 auto;width: 96%;padding: 30px 0px;"
@endsection
@section('content')
<form class="post-form" action="" method="post">
	<div class="form-group col-sm-2">
		<label class="control-label">课程配图</label>
		<div id="thumb">
			<a id="thumb-image" href="#" data-toggle="image" class="img-thumb">
				<img src="{{path_compat('')}}" height="100" />
			</a>
			<input type="hidden" name="thumb" value="" id="input-image" />
		</div>
	</div>
	<div class="form-group col-sm-2">
		<label class="control-label">课程视频 [720P]</label>
		<div id="video_src">
			<a id="video_upload" href="javascript:;" class="img-thumb" >
				<video src="{{path_compat('')}}" poster="{{path_compat('')}}" height="100" width="100" ></video>
			</a>
			<input type="hidden" name="video_src" value=""  />
		</div>
	</div>
	<div class="form-group col-sm-4">
		<label class="control-label">课程名称</label>
		<input class="form-control" required="required" type="text" placeholder="课程名称" maxlength="40" name="name" value="" />
	</div>
	<div class="form-group col-sm-2">
		<label class="control-label">课程类型</label>
		<select class="form-control" name="type_id" required="required">
			@foreach ($typeList as $value)
				<option value="{{$value['id']}}"  >{{$value['name']}}</option>
			@endforeach
		</select>
	</div>
	<div class="form-group col-sm-2">
		<label class="control-label">课程客服</label>
		<select class="form-control" name="service_id" >
			@foreach ($serviceList as $value)
				<option value="{{$value['id']}}"  >{{$value['name']}}</option>
			@endforeach
		</select>
	</div>
	<div class="form-group col-sm-4">
		<label class="control-label">开始时间</label>
		<input class="form-control" required="required" type="datetime-local" placeholder="开始时间"  name="start_time" value="" />
	</div>
	<div class="form-group col-sm-4">
		<label class="control-label">结束时间</label>
		<input class="form-control" required="required" type="datetime-local" placeholder="结束时间" name="end_time" value="" />
	</div>
	<div class="form-group col-sm-12">
		<label class="control-label">课程介绍</label>
		<textarea required="required" id="container" name="content" placeholder="课程介绍" ></textarea>
	</div>
	<div class="form-group col-sm-12">
		@csrf
		<input id="send" type="submit" value="提交" class="btn btn-primary btn-block" />
	</div>
</form>
@endsection
@section('javascript')
<script src="/static/ueditor/ueditor.config.js"></script>  
<script src="/static/ueditor/ueditor.all.js"></script>
<script type="text/javascript">
	var editor = new UE.ui.Editor();
	editor.render("container");
</script>
<script type="text/javascript">

	$('#video_upload').on('click', function() {
		// 定义预签名URL
		var signedUrl	= '';
		var videoSrc	= '';
		// 请求接口获取签名URL
		$.ajax({
			url: "{{url('admin/video_course/get_sign_url')}}",
			type: 'get',
			dataType: 'json',
			success: function(data) {
				// 判断返回值
				if(data.code != 'success'){
					art.dialog({content: data.msg,lock: true,ok: function() {}});
					return ;
				}
				// 获取签名URL
				signedUrl = data.data.sign_url;
				videoSrc  = data.data.video_src;
				// 没有获取到结果的话，结束
				if( !signedUrl ) {
					return;
				}
				// 移除之前上传的表单
				$('#form-upload').remove();
				// 生成一个表单，并且使用CSRF
				$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input osctype="btn_upload_file" id="form-upload-file" type="file" name="file" /> @csrf </form>');
				$('#form-upload input[name=\'file\']').trigger('click');
			},
			error: function(xhr, status, error) {
				console.error('Error:', error);
			}
		});
		
		// 上传文件
		$(document).off('change', '#form-upload-file').on('change','#form-upload-file',function(){
			// 获取文件
			const fileInput = document.getElementById('form-upload-file');
			const file = fileInput.files[0];
			// 如果没有上传文件
			if ( !file ) {
				art.dialog({content: '请上传文件',lock: true,ok: function() {}});
				return ;
			}
			// // 如果没有上传文件
			// if ( file.size >= 524288000 ) {
			// 	art.dialog({content: '上传视频不允许大于500MB',lock: true,ok: function() {}});
			// 	return ;
			// }

			const result = checkVideoResolution(file);
			result.then(function($re){
				if( !$re ){
					art.dialog({content: '上传视频不允许大于1280*720',lock: true,ok: function() {}});
					return ;
				}
				// 调用上传
				upload(file, signedUrl);
			});

			return ;
		})


		const checkVideoResolution =  (file) => {
			return new Promise((resolve, reject) => {
				const video = document.createElement('video',{}); // 创建一个临时的video元素
				const url = URL.createObjectURL(file); // 创建一个指向文件的URL
				video.src = url; // 设置video元素的源为文件URL
				video.muted = true; // 静音视频，避免自动播放问题
				// 等待元数据加载完成
				video.onloadedmetadata =  function (){ // 等待元数据加载完成
					URL.revokeObjectURL(url); // 释放URL对象
					if (video.videoWidth > 1280 || video.videoHeight > 720) {
						video.remove();
						resolve(false);
					} else {
						video.remove();
						resolve(true);
					}
				};
			})
		}

		const upload = async (file, presignedUrl) => {
			// 提示上传中
			art.dialog({id:'loading',lock: true,title:'视频上传中'});
			// 上传文件
			const response = await fetch(presignedUrl, {method: 'PUT',body: file.slice(0, file.size)});
			// 移除loading
			art.dialog.list['loading'].close();
			// 结果
			if (!response.ok) {
				art.dialog({content: '上传失败',lock: true,ok: function() {}});
				return ;
			}
			// 显示上传成功的图片
			$('#video_upload').html('<video src="'+videoSrc+'" height="100" width="100" ></video>');
			$('#video_src input').val(videoSrc);
		};
	});
</script>
@endsection