当前位置:网站首页>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 :
- <template name="bdParseVideo">
- <!-- increase video Tag support , And add... In cycles -->
- <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>
Change to :
- <template name="bdParseVideo">
- <!-- increase video Tag support , And add... In cycles -->
- <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>
(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 :
- 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 :
- <template name="wxParseVideo">
- <!-- increase video Tag support , And add... In cycles -->
- <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>
Change to :
- <template name="wxParseVideo">
- <!-- increase video Tag support , And add... In cycles -->
- <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>
(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 :
- 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 :

边栏推荐
猜你喜欢

Phpcms V9 mobile phone access computer station one-to-one jump to the corresponding mobile phone station page plug-in

XSS 跨站脚本攻击

力扣399【除法求值】【并查集】

Data warehouse (1) what is data warehouse and what are the characteristics of data warehouse

Live review | smardaten lihongfei interprets the Research Report on China's low / no code industry: the wind direction has changed

Regular Expression 正则表达式

浅谈一下Type-C接口发展历程

Construction and verification of mongodb sharding environment (redis final assignment)

uniapp用uParse实现解析后台的富文本编辑器的内容及修改uParse样式

Matlab drawing checkerboard (camera calibration)
随机推荐
phpcms手机站模块实现自定义伪静态设置
phpcms小程序插件4.0版正式上线
Mongodb分片环境搭建和验证(redis期末大作业)
Sublime Text3 common plug-ins
1.25 suggestions and design of machine learning
MySQL在服务里找不到(未卸载)
Structure diagram of target detection network
1.20 study univariate linear regression
[program compilation and pretreatment]
In depth study paper reading target detection (VII) Chinese version: yolov4 optimal speed and accuracy of object detection
commonJS和ES6模块化的区别
Machine learning (Part 2)
1.17 daily improvement of winter vacation learning (frequency school and Bayesian school) and maximum likelihood estimation
Selenium 搭建 Cookies池 绕过验证反爬登录
phpcms v9去掉phpsso模块
Yolov5进阶之二安装labelImg
反爬之验证码识别登录 (OCR字符识别)
9. code generation
[QNX Hypervisor 2.2用户手册]12.1 术语(一)
Corn image segmentation count_ nanyangjx