织梦百度小程序微信小程序video标签不支持视频封面，autoplay等问题修复方法 _织梦CMS教程_网络技术

织梦百度小程序微信小程序video标签不支持视频封面，autoplay等问题修复方法 _织梦CMS教程

栏目：网络技术发布时间：2019-09-23

在现有的百度小程序富文本组件bdParse，以及微信小程序富文本组件wxParse，对于video的标签解析仅仅只是有个video而已，其他的属性几乎都过滤掉了

在现有的百度小程序富文本组件bdParse，以及微信小程序富文本组件wxParse，对于video的标签解析仅仅只是有个video而已，其他的属性几乎都过滤掉了，所以就需要我们假设对于属性（由于H5的video属性和小程序的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>

改成：

<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>

（2）针对dedecms用户以及其它video的poster属性不显示全网址的修复办法

在小程序的内容之前使用正则替换，补全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>

改成：

<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>

（2）同理需要对文章中的poster不是全网址的视频封面图片补全网址

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标签的常用属性，如图：

# 贵阳网站建设哪家不错 # false # toolbar # 网站SEO综合用什么茶 # 全网营销渠道怎么推广好 # 网站推广会员注册要钱吗 # 推广网站厂家 # 效果营销推广案例分析题 # 网站推广妙招案例分享 # 摩托罗拉网站建设 # 如何优化网站询问w火27星 # 临海网站seo优化 # brush # 青岛济南企业网站建设 # 涪陵广告推广招聘网站 # 咸阳专业网站建设设计 # 台州高端网站建设选哪家 # 周口本地推广营销费用 # 朝阳区自动网络营销推广 # seo 页面分析工具 # seo 登记 # 抖音seo加盟技巧 # seo入口网站推广 # swan # autoplay等问题修复方法 # 织梦CMS教程 # 织梦百度小程序 # 织梦微信小程序 # video标签不支持视频 # 有个 # 其他的 # 掉了 # 如图 # 就可以 # 实现了 # 织梦百度小程序微信小程序video标签不支持视频封面 # class # pre # gz # aliyucs # jpg # template # lt # quot # nbsp # html

相关栏目：【网络营销44070 】【网络推广122852 】【网络优化116010 】【网址导航102054 】【网络技术82194 】【网络资讯43554 】

上一篇：织梦百度小程序demo的一处bug修复_织梦CMS教程

下一篇：织梦百度小程序tabbar不支持传参的处理办法_织梦CMS教程