织梦百度小程序微信小程序video标签不支持视频封面,autoplay等问题修复方法
在现有的百度小程序富文本组件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=http://www.dede58.com/a/dedejq/"{{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=http://www.dede58.com/a/dedejq/"{{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=http://www.dede58.com/a/dedejq/"{{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=http://www.dede58.com/a/dedejq/"{{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标签的常用属性,如图:
☉首先声明,只要是我们的vip会员所有源码均可以免费下载,不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ(984818011)进行交流。
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ(984818011)进行交流。
相关教程:
- 织梦dede首页列表页获取文章对应的tag标签
- 织梦dede导航栏目顶级和二级判断二级输出不同url
- 织梦dede标签array runphp静态生成乱码BUG解决方法
- 织梦dede如何禁止会员发布文章内容带超链接
- 织梦ajax跨域提交自定义表单和跨域验证码问题
- 织梦CMS MIP文章内容页图片适配百度MIP规范
- 织梦CMS时间格式实现XX秒前、XX分钟前、XX天前
- 织梦DedeCMS更新系统缓存增加清理沉余缓存的功能
- 织梦CMS让channelartlist标签支持currentstyle属性的
- 织梦dede自带编辑器替换百度ueditor编辑器
- 织梦DEDECMS整站动态化或整站静态化设置方法
- 织梦dede 模板路径templets目录都有什么?