修复小程序富文本组件不支持video视频封面、autoplay、controls等属性问题

在现有的百度小程序富文本组件bdParse,以及微信小程序富文本组件wxParse,对于video的标签解析仅仅只是有个video而已,其他的属性几乎都过滤掉了,所以就需要我们假设对于属性(由于H5的video属性和小程序的video属性要求不一样,以小程序为主)

一、百度小程序的bdParse修复方法
(1)打开bdParse/bdParse.swan找到video标签解析处大致第10行:

  1. <template name="bdParseVideo"> 
  2.   <!--增加video标签支持,并循环添加--> 
  3.   <view class="{{item.classStr}} bdParse-{{item.tag}}" style="{{item.styleStr}}"> 
  4.     <video class="{{item.classStr}} bdParse-{{item.tag}}-video" src="{{item.attr.src}}"></video> 
  5.   </view> 
  6. </template> 

改成:

  1. <template name="bdParseVideo"> 
  2.   <!--增加video标签支持,并循环添加--> 
  3.   <view class="{{item.classStr}} bdParse-{{item.tag}}" style="{{item.styleStr}}"> 
  4.     <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> 
  5.   </view> 
  6. </template> 

(2)针对dedecms用户以及其它video的poster属性不显示全网址的修复办法
在小程序的内容之前使用正则替换,补全poster地址:
dede版百度小程序demo修复:show.js的113行加入以下代码:

  1. content.body = content.body.replace(/poster=\"(.*)\"/gi, 'poster=\"'+ app.globalData.host+'$1\"');  


二、微信小程序wxParse修复方法
(1)打开wxParse/wxParse.wxml找到video标签解析处大致第13行:

  1. <template name="wxParseVideo"> 
  2.   <!--增加video标签支持,并循环添加--> 
  3.   <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}"> 
  4.     <video class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item.attr.src}}"></video> 
  5.   </view> 
  6. </template> 

改成:

  1. <template name="wxParseVideo"> 
  2.   <!--增加video标签支持,并循环添加--> 
  3.   <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}"> 
  4.     <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> 
  5.   </view> 
  6. </template> 

(2)同理需要对文章中的poster不是全网址的视频封面图片补全网址
dede版微信小程序demo修复:show.js的105行加入以下代码:

  1. 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标签的常用属性,如图:

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值