当前位置:网站首页>Fix the problem that the rich text component of the applet does not support the properties of video cover, autoplay, controls, etc

Fix the problem that the rich text component of the applet does not support the properties of video cover, autoplay, controls, etc

2022-06-26 09:04:00 CMS applet plug-in [official]

In the existing Baidu applet rich text component bdParse, And the rich text component of wechat applet wxParse, about video The tag parsing of is just a video nothing more , Almost all other attributes are filtered out , So we need to assume that for attributes ( because H5 Of video Properties and applet video Different attribute requirements , It's mainly small programs )

One 、 Baidu applet bdParse Repair method
(1) open bdParse/bdParse.swan find video The label parsing section is roughly the 10 That's ok :

  1. <template name="bdParseVideo"> 
  2.   <!-- increase video Tag support , And add... In cycles --> 
  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> 

Change to :

  1. <template name="bdParseVideo"> 
  2.   <!-- increase video Tag support , And add... In cycles --> 
  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) in the light of dedecms Users and others video Of poster Property does not display the full URL fix
Use regular substitution before the contents of the applet , completion poster Address :
dede Version Baidu applet demo Repair :show.js Of 113 Add the following code to the line :

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


Two 、 Wechat applet wxParse Repair method
(1) open wxParse/wxParse.wxml find video The label parsing section is roughly the 13 That's ok :

  1. <template name="wxParseVideo"> 
  2.   <!-- increase video Tag support , And add... In cycles --> 
  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> 

Change to :

  1. <template name="wxParseVideo"> 
  2.   <!-- increase video Tag support , And add... In cycles --> 
  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) In the same way, it is necessary to correct the poster The video cover image that is not the full web address complements the web address
dede Version of wechat applet demo Repair :show.js Of 105 Add the following code to the line :

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

【 Be careful 】
Applet video and H5 Of video It's a little different
autoplay、controls、loop、muted And other attributes need to be written as :autoplay=“{ {true}}”,controls=“{ {true}}”


That's how it works h5 Of video Common properties of tags , Pictured :

原网站

版权声明
本文为[CMS applet plug-in [official]]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/177/202206260838405948.html