【天津】关于百度小程序微信小程序video标签不支持视频封面autoplay等问题修复方法
发布时间:2019-09-16 18:16:16 作者:admin 点击:
在现有的百度小程序富文本组件bdParse,以及微信小程序富文本组件wxParse,对于video的标签解析仅仅只是有个video而已,其他的属性几乎都过滤掉了,所以就需要我们假设对于属性(由于H5的video属性和小程序的video属性要求不一样,以小程序为主)
一、百度小程序的bdParse修复方法
(1)打开bdParse/bdParse.swan找到video标签解析处大致第10行:
在小程序的内容之前使用正则替换,补全poster地址:
dede版百度小程序demo修复:show.js的113行加入以下代码:
二、微信小程序wxParse修复方法
(1)打开wxParse/wxParse.wxml找到video标签解析处大致第13行:
dede版微信小程序demo修复:show.js的105行加入以下代码:
小程序的video和H5的video稍微有点不同
autoplay、controls、loop、muted等属性需要写成:autoplay=“{{true}}”,controls=“{{true}}”
这样就可以实现了h5的video标签的常用属性,如图:
这样就可以实现了h5的video标签的常用属性,如图:
一、百度小程序的bdParse修复方法
(1)打开bdParse/bdParse.swan找到video标签解析处大致第10行:
改成:
- <template name="bdParseVideo">
- <!--增加video标签支持,并循环添加-->
- <view class="{{item.classStr}} bdParse-{{item.tag}}" style="{{item.styleStr}}">
- <video class="{{item.classStr}} bdParse-{{item.tag}}-video" src="{{item.attr.src}}"></video>
- </view>
- </template>
(2)针对dedecms用户以及其它video的poster属性不显示全网址的修复办法
- <template name="bdParseVideo">
- <!--增加video标签支持,并循环添加-->
- <view class="{{item.classStr}} bdParse-{{item.tag}}" style="{{item.styleStr}}">
- <video class="{{item.classStr}} bdParse-{{item.tag}}-video" poster="{{item.attr.poster}}" autoplay="{{item.attr.autoplay}}" controls="{{item.attr.controls}}" loop="{{item.attr.loop}}" muted="{{item.attr.muted}}" src="{{item.attr.src}}"></video>
- </view>
- </template>
在小程序的内容之前使用正则替换,补全poster地址:
dede版百度小程序demo修复:show.js的113行加入以下代码:
- content.body = content.body.replace(/poster=\"(.*)\"/gi, 'poster=\"'+ app.globalData.host+'$1\"');
二、微信小程序wxParse修复方法
(1)打开wxParse/wxParse.wxml找到video标签解析处大致第13行:
改成:
- <template name="wxParseVideo">
- <!--增加video标签支持,并循环添加-->
- <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
- <video class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item.attr.src}}"></video>
- </view>
- </template>
(2)同理需要对文章中的poster不是全网址的视频封面图片补全网址
- <template name="wxParseVideo">
- <!--增加video标签支持,并循环添加-->
- <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
- <video class="{{item.classStr}} wxParse-{{item.tag}}-video" poster="{{item.attr.poster}}" autoplay="{{item.attr.autoplay}}" controls="{{item.attr.controls}}" loop="{{item.attr.loop}}" muted="{{item.attr.muted}}" src="{{item.attr.src}}"></video>
- </view>
- </template>
dede版微信小程序demo修复:show.js的105行加入以下代码:
【注意】
- content.body = content.body.replace(/poster=\"(.*)\"/gi, 'poster=\"' + app.globalData.host + '$1\"');
小程序的video和H5的video稍微有点不同
autoplay、controls、loop、muted等属性需要写成:autoplay=“{{true}}”,controls=“{{true}}”
这样就可以实现了h5的video标签的常用属性,如图:
这样就可以实现了h5的video标签的常用属性,如图:
网站关键词:
上一篇:虚拟主机屏蔽IP地址的方法
下一篇:last_page
评论排行
- ·易优cms小程序插件(76)
- ·微信小程序百度小程序记...(10)
- ·关于百度小程序微信小程...(2)
- ·电子图书馆网站(1)
- ·dedecms小程序插件最新升级日志(1)
- ·怎么选择注册有利于SEO优...(0)
- ·网站文章内容更新有哪些原则(0)
- ·修复list接口当传参more...(0)
- ·网站被恶意镜像怎么办 ...(0)
- ·已经上线的小程序如何自...(0)
- ·网站建设是一门技术活 ...(0)
- ·企业网站建设的具体流程...(0)
- ·建议:请不要在工作中发...(0)
- ·移动端网站建设将何去何从?(0)
- ·论企业网站建设的行业现状(0)
- ·phpcms小程序插件api接口...(0)
相关文章
相关栏目
阅读排行
- 1小程序测试正常真机不显示内容问题处理(request:fail ssl hand shake error)
- 2网站被恶意镜像怎么办 一段代码轻松搞定(全面版)
- 3phpcms v9小程序demo内容页安卓有时候不显示内容bug修改
- 4phpcms开发小程序api插件1.2版本
- 5虚拟主机屏蔽IP地址的方法
- 6阿里云备案详细流程
- 7phpcms v9手机访问电脑站一对一跳转对应手机站页面插件
- 8关于百度小程序微信小程序video标签不支持视频封面autoplay等问题修复方法
- 9FTP使用教程(以FlashFTP为例)
- 10网站安装教程(phpcms v9程序)
更多+最新案例