微信小程序video超出屏幕

zhouhongxi commented 4 years ago

微信小程序中该html中video部分会显示超出屏幕 wxParse解析没有问题望修复 html如下：

<p style="text-align: center; ">产品详情</p><p style="text-align: center;">增加一个视频</p><p style="text-align: center;"><img src="https://bmob-cdn-27016.bmobpay.com/2019/12/05/ef654be040733d4f8027ff3ab30968de.png" data-filename="image name" style="width: 128px;"></p><p style="text-align: center; "><video controls="" src="https://bmob-cdn-27016.bmobpay.com/2019/12/04/5ae1dcf34040971280ed6d0b2c025951.mp4" width="640" height="360" class="note-video-clip"></video><br></p>

jin-yufeng commented 4 years ago

这里的 video 设置了 width="640" height="360"，所以按照 640px * 360px 显示（wxParse 没有问题可能是因为不支持 width 和 height 属性的解析）可以在 tag-style 属性里给 video 设置默认的宽高并强制覆盖这个样式

<parser html="{{html}}" tag-style="{{tagStyle}}"></parser>

data:{
  tagStyle:{
    // 一定要加 !important 才能覆盖属性中的样式
    // 宽度可以通过 max-width:100% 限制不超过屏幕宽度，高度必须设置成绝对高度（小程序中 video height:auto 会变成 0）
    video: "width:300px !important;height:225px !important;"
  }
}

zhouhongxi commented 4 years ago

非常感谢！问题已解决！

如果有时间我一定飞

------------------ 原始邮件 ------------------ 发件人: "jin-yufeng"<notifications@github.com>; 发送时间: 2019年12月5日(星期四) 上午9:02 收件人: "jin-yufeng/Parser"<Parser@noreply.github.com>; 抄送: "喜多多"<qiqi-zhouhongxi@qq.com>;"Author"<author@noreply.github.com>; 主题: Re: [jin-yufeng/Parser] 微信小程序video超出屏幕 (#58)

这里的 video 设置了 width="640" height="360"，所以按照 640px * 360px 显示（wxParse 没有问题可能是因为不支持 width 和 height 属性的解析）可以在 tag-style 属性里给 video 设置默认的宽高并强制覆盖这个样式 <parser html="{{html}}" tag-style="{{tagStyle}}"></parser> data:{ tagStyle:{ // 一定要加 !important 才能覆盖属性中的样式 // 宽度可以通过 max-width:100% 限制不超过屏幕宽度，高度必须设置成绝对高度（小程序中 video height:auto 会变成 0） video: "width:300px !important;height:225px !important;" } }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

jin-yufeng / mp-html

微信小程序video超出屏幕 #58