html5视频自动播放,PC端和移动端都支持视频video自动播放的代码

需求说明

今天有个朋友微信上说目前他们在做抖音短视频的内容创作，方向是国家级非物质文化遗产「汝瓷」，想在他们官方网站上增加短视频的功能，将抖音的内容页上传到网站上。

其实这个功能并不复杂，只需要开通上传视频功能即可，看了下后台使用的编辑器是UEditor，目前没有视频上传图标，就通过调用js实现了编辑器里的视频上传图标

UEditor默认的视频支持代码

视频上传后自动视频的代码如下

最大的问题就是无法自动播放，并且限定了视频宽和高，原本竖形的视频变成了横形视频，只在中间一块播放，另外就是在为手动点播放，未播放时无法加载视频宽高、封面图、播放时间等信息，那么就需要解决这个问题。

自动播放及自适应大小代码实现

PC端相应简单些，浏览器对标签的兼容还是很好的，但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现；

同上面方法设置后，PC网页就可以实现自动播放了。

移动端，好像这个代码也可以实现，至少IOS13.4的safari浏览器可以那就先这样吧。

对ueditor上传视频代码改造

接下来就是如何把UEditor里面进行替换了，对UEditor编辑器目录进行查找，应该是ueditor.all.js这个文件

文件ueditor.all.js

将str = '

' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +

'

';

替换为str = '' +

'';

好像不太对，打开编辑器发现调用的是ueditor.all.min.js这个文件，那就继续修改。

文件ueditor.all.min.js

将

替换为

OK生效了。

结尾

这篇文章主要说的是UEditor的更换标签，如果是普通网页使用者使用以下代码就可以了。

更新

忽略掉了CSS，重新补充下。video {

height: auto;

/* Make sure images are scaled correctly. */

max-width: 100%;

/* Adhere to container width. */

}

iframe,

embed {

border: 0;

display: block;

overflow: hidden;

width: 100%;

}

/* Make sure embeds and iframes fit their containers. */

embed,

iframe,

object {

margin-bottom: 1.5rem;

max-width: 100%;

}

iframe {

background-color: #FFFFFF;

vertical-align: middle;

}