需求说明
今天有个朋友微信上说目前他们在做抖音短视频的内容创作,方向是国家级非物质文化遗产「汝瓷」,想在他们官方网站上增加短视频的功能,将抖音的内容页上传到网站上。
其实这个功能并不复杂,只需要开通上传视频功能即可,看了下后台使用的编辑器是UEditor,目前没有视频上传图标,就通过调用js实现了编辑器里的视频上传图标
UEditor默认的视频支持代码
视频上传后自动视频的代码如下
最大的问题就是无法自动播放,并且限定了视频宽和高,原本竖形的视频变成了横形视频,只在中间一块播放,另外就是在为手动点播放,未播放时无法加载视频宽高、封面图、播放时间等信息,那么就需要解决这个问题。
自动播放及自适应大小代码实现
PC端相应简单些,浏览器对标签的兼容还是很好的,但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现;
同上面方法设置后,PC网页就可以实现自动播放了。
移动端,好像这个代码也可以实现,至少IOS13.4的safari浏览器可以那就先这样吧。
对ueditor上传视频代码改造
接下来就是如何把UEditor里面进行替换了,对UEditor编辑器目录进行查找,应该是ueditor.all.js这个文件
文件ueditor.all.js
将str = '
&