![[prov_or_city]网站制作咨询电话](/template/default/index/img/ren.png)
![[prov_or_city]网站制作](/template/default/index/img/menu.png)
今天有个朋友微信上说目前他们在做抖音短视频的内容创作，方向是国家级非物质文化遗产「苗绣」，想在他们官方网站上增加短视频的功能，将抖音的内容页上传到网站上。
其实这个功能并不复杂，只需要开通上传视频功能即可，看了下后台使用的编辑器是 UEditor，目前没有视频上传图标，就通过调用 js 实现了编辑器里的视频上传图标
UEditor 默认的视频支持代码
视频上传后自动视频的代码如下
<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="/public/uploads//video/20230813/1384690865630659.mp4" data-setup="{}">
<source src="/public/uploads/video/20230813/1384690865630659.mp4" type="video/mp4"/>
</video>
最大的问题就是无法自动播放，并且限定了视频宽和高，原本竖形的视频变成了横形视频，只在中间一块播放，另外就是在为手动点播放，未播放时无法加载视频宽高、封面图、播放时间等信息，那么就需要解决这个问题。
自动播放及自适应大小代码实现
PC 端相应简单些，浏览器对 <video> 标签的兼容还是很好的，但是想要在浏览器中当做 Banner 视频自动播放就必须设置这些属性来更好地实现；
<video muted autoplay="autoplay" loop="loop" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true" >
<source src="indexMove.mp4" type="video/mp4">
</video>
同上面方法设置后，PC 网页就可以实现自动播放了。
移动端，好像这个代码也可以实现，至少 IOS13.4 的 safari 浏览器可以那就先这样吧。
对 ueditor 上传视频代码改造
接下来就是如何把 UEditor 里面进行替换了，对 UEditor 编辑器目录进行查找，应该是 ueditor.all.js 这个文件
文件 ueditor.all.js
将
str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="video/' + ext + '" /></video>';
替换为
str = '<video' + (id ? ' id="' + id + '"' : '') + ' muted ' + ' autoplay="autoplay"' + 'loop="loop"' + 'x5-playsinline="true"' + 'playsinline="true"' + 'webkit-playsinline="true"' + 'preload="auto"' + 'x5-video-player-type="h5"' + 'x5-video-player-fullscreen="true>' +
'<source src="' + url + '" type="video/' + ext + '" /></video>';
实际测试发现不对，编辑器调用的是 ueditor.all.min.js 文件，我们继续修改。
文件 ueditor.all.min.js
将
<video"+(g?' id="'+g+'"':"")+' class="'+k+' video-js" '+(f?' style="float:'+f+'"':"")+' controls preload="none" width="'+c+'" height="'+d+'" src="'+a+'" data-setup="{}"><source src="'+a+'" type="video/'+m+'" /></video>
替换为
<video"+(g?' id="'+g+'"':"")+' muted autoplay="autoplay" loop="loop" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true"'><source src="'+a+'" type="video/'+m+'" /></video>
OK 生效了。
结尾
这篇文章主要说的是 UEditor 的更换标签，如果是普通网页使用者使用以下代码就可以了。
<video muted autoplay="autoplay" loop="loop" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true" >
<source src="indexMove.mp4" type="video/mp4">
</video>
免费试用：https://www.50yun.top/col-reg/
