加入收藏 插件商城
QQ咨询 官方微信

添加微信好友

 官方小程序

百度小程序

微信小程序

头条小程序

 关于我们
close
close
15137100750

小程序

首页 > 小程序 >

关于百度小程序微信小程序video标签不支持视频封面autoplay等问题修复方法

 admin  2019-09-16 18:35:44
在现有的百度小程序富文本组件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标签的常用属性，如图：





￥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏，我们将继续分享更多优质内容，让我们一起创建更加美好的网络世界！

支付宝扫一扫打赏

微信扫一扫打赏

本文《关于百度小程序微信小程序video标签不支持视频封面autoplay等问题修复方法》发布于石头博客文章，作者：admin，如若转载，请注明出处：https://www.pweb123.com/xiaocheng/787.html，否则禁止转载，谢谢配合!
上一篇：小程序首页加载之前加载其他相关资源或配置（小程序的promise应用）
下一篇：小程序搜索列表页实现搜索词高亮（支持微信和百度）

您可能感兴趣

文章点评

我来说两句 已有0条评论
点击图片更换
登录 | 注册
phpcms小程序插件
dedecms小程序插件
pbootcms小程序插件
迅睿小程序插件
易优cms小程序插件
phpcms在线付费阅读插件（包含：支付宝支付模块+微信支付模块+付费阅读模块）
phpcms商城模块优化版上线
phpcms v9去掉phpsso修改方案，后台可以直接关闭
phpcms v9修改flash上传为h5上传（webuploader）
phpcms会员中心layui版
阅读排行

添加微信好友

热门栏目
首页 资讯 CMS教程 HTML基础 小程序 插件 SEO 模板
版权所有：郑州腾石网络科技有限公司 备案信息：豫ICP备18019117号-2
站长QQ：2863868475 业务合作咨询：15137100750(同微信)
本站所有投放的广告是有其他网站提供，不代表本站立场，同时网站首页广告位对外出租详情咨询本站站长！同时欢迎广大站长加入个人建站团队
网站地图 XML地图

添加微信好友

微信小程序

百度小程序