关于微信网页开发中插入腾讯/优酷视频笔记（包括Ueditor插入视频/iframe）

2017-01-05

getContent()获取不到插入的embed/iframe元素

通过编辑器插入后，执行getContent()后获取到的元素被过滤，解决方法参考
百度编辑器UEditor不能插入视频的解决方法

这里提醒：文章中第一步img中还是加上’style’，否则获取后的style属性会被过滤

编辑器插入视频

首先代码上在使用ueditor的地方配置上insertvideo或insertframe按钮即可，之后操作通过复制视频地址黏贴插入。

但是：

在微信礼并不支持腾讯/优酷的“复制Flash地址”或“复制HTML代码”，因为他们都是通过flash进行播放。
在不同的浏览器/系统上也可能会出现不兼容的问题
最后通过“复制通用代码”，确认微信上iOS/Android均可用，只是Andorid上不同手机显示效果略有区别
“复制Flash地址”可通过编辑器按钮点击黏贴插入，“复制HTML代码”和“复制通用代码”都需要通过代码插入

编辑器插入建议

####方式一
见百度UEditor添加视频增加支持“通用代码”功能，支持微信

####方式二
通过自定义按钮，操作弹窗保存后插入代码。

因为分析“复制Flash地址”/“复制HTML代码”/“复制通用代码”，发现区别在于URL，而URL中统一的是vid，所以逻辑上可以根据用户复制的内容，通过其中url的值来过滤，获取vid并处理成通用代码进行插入即可

测试编辑器中HTML代码如下：

<p>
    &nbsp;&nbsp;编辑器添加视频<br/>
 &nbsp;<embed type="application/x-shockwave-flash" class="edui-faked-video" pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=h03464j6vzh&auto=0" width="200" height="200" wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true"/><br/>&nbsp;&nbsp;编辑器添加iframe<br/>
 &nbsp;<iframe src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=h03464j6vzh&auto=0" width="200" height="200" frameborder="0" align=""></iframe>
 &nbsp;<iframe frameborder="0" width="200" height="200" src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=q0357mtooxc&auto=0" allowfullscreen=""></iframe>
 &nbsp;<br/>&nbsp;&nbsp;复制通用iframe<br/>
 &nbsp;<iframe frameborder="0" width="200" height="200" src="https://v.qq.com/iframe/player.html?vid=q0357mtooxc&tiny=0&auto=0" allowfullscreen="false"></iframe>
 &nbsp;<br/>&nbsp;&nbsp;复制HTML embed<br/>
 &nbsp;<embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=q0357mtooxc&auto=0" allowfullscreen="true" width="200" height="200" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash"/>&nbsp;<br/>&nbsp;&nbsp;优酷复制通用iframe<br/>
 &nbsp;<iframe height="200" width="200" src="http://player.youku.com/embed/XMTkwNjkzOTI4NA==" frameborder="0" allowfullscreen="false"></iframe>
</p>

参考文档

百度UEditor添加视频增加支持“通用代码”功能，支持微信
 百度编辑器UEditor不能插入视频的解决方法 __ 解决getContent()获取不到插入的视频元素
微信中网页插入视频