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

需求说明

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

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

UEditor默认的视频支持代码

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

<video class="edui-upload-video  vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="/public/uploads//video/20200320/1584690225630534.mp4" data-setup="{}">
<source src="/public/uploads//video/20200320/1584690225630534.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>

更新

忽略掉了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;
}

PC端和移动端都支持视频video自动播放的代码相关推荐

如何使视频video自动播放
格式:<video src="***.mp4" ></video> 在PC端要自动播放插入两个代码即可: 把自动播放的属性加上此时PC端并没有自动播放只 ...
jQuery实现点击图片弹出视频并自动播放
有时候我们需要放一张视频的封面,当我们点击封面的时候就播放弹出视频并自动播放,而且我们还可以把视频的封面做成视频加载前的封面,代码较少 <!DOCTYPE html> <html l ...
php ppt自动播放,ppt如何循环播放，ppt如何添加视频设置自动播放(ppt转换成视频)...
演示文稿制作软件Microsoft Office PowerPoint,主要用于演示文稿的创建,即幻灯片的制作.可有效帮助演讲.教学,产品演示等,使用范围广泛.大家应该都比较熟悉吧.学习使用PPT,使 ...
【H5】html5 video 在微信浏览器视频不能自动播放！
html5 video在安卓微信浏览器视频不能自动播放 ! html5 video在安卓微信浏览器视频不能自动播放 ! html5 video在安卓微信浏览器视频不能自动播放 ! 注:重要的事情说三遍 ...
php怎么让视频自动播放,怎样让优酷等视频实现自动播放
优酷播放器自动播放方法: 方法一:1.把下面的代码复制到记事本中,保存备用. http://player.youku.com/player.php/sid/XMzg4NzEyOTY==/v.swf?V ...
实现类似微博视频滚动自动播放与暂停
最近需要实现一个类似于微博内容中视频自动播放与暂停的功能.拿到这个功能后,需要把技术点细化.首先分析微博实现视频自动播放暂停的流程,拿到了我的华为荣耀7打开微博玩了半个小时..发现当手机处于连接WiF ...
HTML5播放视频autoplay不起作用-HTML5视频不自动播放
初学HTML5视频播放的同学,可能大多数都会遇到这样一个问题:按照教程写的代码,添加了autoplay属性,为什么视频还是无法自动播放? <!DOCTYPE html> <html& ...
javascript如何实现类似西瓜视频的视频队列自动播放？
关注并将「趣谈前端」设为星标每天定时分享技术干货/优秀开源/技术思维前言去年利用空余时间研究了一下javascript的Interp Observer API,发现其有很大的应用场景,比如图片或 ...
H265流媒体播放器EasyPlayer如何设置视频关闭自动播放？
使用了TSINGSEE青犀视频平台的小伙伴都知道,EasyNVR.EasyDSS内都集成了EasyPlayer的不同版本,如果有用户想将EasyPlayer播放器集成进自己的流媒体平台,我们也提供了非 ...

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

PC端和移动端都支持视频video自动播放的代码相关推荐

最新文章

热门文章