canvas绘制视频在x5内核中不显示 5C

项目需求,在canvas中实时绘制video中的视频。百度了方法是同伙定时器实时的绘制video的每一帧画面。
在测试时发现在x5内核中canvas无法显示所绘制的画面,在手机自带浏览器,和PC端中则正常使用。有没有兄弟碰到过类似的请求支援!

 var videoObj = $("#video")[0];
    var ctx=$("#canvas")[0].getContext('2d');
    var fps = 1000/30;
    var timer = null;
    timer=window.setInterval(function() {
            ctx.drawImage(videoObj,-85,-150,170,300);
    },fps);
0

1个回答

微信内置浏览器不支持canvas绘制video,最好的做法是使用dom和canvas混合开发。

<video src="test.mp4" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline webkit-playsinline preload="auto" x5-video-orientation="portraint"></video>

添加了 x5-video-player-type 和 x5-video-player-fullscreen 就能让video在安卓内全屏,且video上可以放置其他元素。playsinline 和 webkit-playsinline 可以让video在ios内内联播放。前提是你得把视频放在腾讯服务器或者上传到腾讯视频。

附上一个觉得不错的文章:https://segmentfault.com/a/1190000006857675#articleHeader0

0
yummry
yummry 回复weixin_38570659: 没有,后来这条路就放弃了。不好意思
5 个月之前 回复
weixin_38570659
weixin_38570659 回复yummry: 请问解决问题了么 我也有这个问题
5 个月之前 回复
kenvs
kenvs 回复yummry: 忘记是在哪里看到了,确实是没办法绘制的。
10 个月之前 回复
yummry
yummry 谢谢回答!之前就是因为播放全屏的问题转到了canvas绘制video,结果微信这边又不支持。很是郁闷!能确定是x5内核不支持vanvas绘制video吗?去了微信浏览器内核文档上寻找,没有发现类似的。是在哪里看过这方面的吗?这篇文章之前解决全屏问题时也已经看过了,跟项目的要求不是太符合。整的很恶心啊!
10 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
腾讯X5,视频全屏崩溃解决方法
很简单,Demo写错了,所以大家不好做。 /** * 全屏播放配置 */ @Override public void onShowCustomView(View view, CustomViewCallback customViewCallback) { FrameLayout normalView = (FrameLayout) findView...
x5内核,video标签点击播放不自动全屏
在点击video播放时,不让它全屏显示播放? &lt;video id="video" src="" controls autoplay muted x5-playsinline="" playsinline="" webkit-playsinline="" x-webkit-airplay="allow" preload="auto" x5-video-player-fullscreen...
H5中利用canvas绘制video
问题: 直接通过video播放视频时,iOS会自动全屏。Android上浏览器正常,但Android中QQ、weichat内嵌浏览器自动全屏。 需求: video播放视频时能够自动播放且不全屏,需适配大部分机型 探索过程: 1、使用内联播放属性:webkit-playsinline、playsinline 解决了iOS上视频自动全屏问题,但是这个属性在Android中的qq和wechat上无效 原...
关于H5video标签在微信X5内核不兼容问题
参考:https://blog.csdn.net/qq_16494241/article/details/62046891 &amp;lt;video id=&quot;videoID&quot; src=&quot;video.mp4&quot; poster=&quot;loadbg.jpg&quot; preload=&quot;auto&quot; x-webkit-airplay=&quot;true&quot; x5-video-player-type=&quot;h5&quot; x5-vid
X5内核浏览器video自动全屏解决办法
很多在做直播的朋友经常会问:微信、QQ浏览器使用video标签播放时如何不自动全屏?我需要在video容器中播放!
解决 腾讯X5内核 的WebView 视频兼容问题
在集成X5内核的WebView的时候,部分手机会出现视频兼容问题。 解决方案: 在初始化WebView设置的时候加入如下代码: //兼容视频 try { if (webview.getX5WebViewExtension() != null) { Bundle data = new Bundle(); ...
腾讯X5webView支持各种类型的视频播放
腾讯X5webView支持各种类型的视频播放
腾讯x5内核(TBS)集成使用详解(webView视频播放)
腾讯x5内核(TBS)集成使用详解 腾讯x5内核(TBS)集成简单,目前在腾讯的QQ和微信中均有使用。 相对于android的系统内核来说,TBS简直太完美了 TBS(腾讯浏览服务)的优势 速度快:相比系统webview的网页打开速度有30+%的提升; 省流量:使用云端优化技术使流量节省20+%; 更安全:安全问题可以在24小时内修复; 更稳定:经过亿级用户的使用考验,CRASH率低于0.15%...
Android 使用WebView 实现播放爱奇艺视频,可全屏(使用的腾讯的X5内核) (二)
接着上一篇文章,这一章为视频加载。 1.自定义X5WebView 这个类,X5的Demo中也有,我们主要是坐一些修改,去掉那些提示文字。 public class X5WebView extends WebView { TextView title; private WebViewClient client = new WebViewClient() { /*...
Android集成腾讯x5内核浏览器及视频播放问题总结
一、关于x5内核的集成 1.关于x5内核的集成在这里就不多做赘述,我们只讨论集成后所产生的问题,因为集成过程还是很简单的,参照官方文档,一步一步的来就好。 官方文档地址:https://x5.tencent.com/tbs/guide/sdkInit.html 或者可以参照:https://blog.csdn.net/xiangshiweiyu_hd/article/details/818...
webview不能自动播放声音,换x5内核浏览器及其sdk的使用方法
       前端写的h5页面有声音自动播放效果,但是嵌到andriod的webview之后发现并不能正常播放,ios一开始也不是能播放的,需要用户与界面互动之后才能播放,但是ios可以通过设置setMediaPlaybackRequiresUserAction,解决这个问题,但是andriod没有类似的方法。查了下解决方法:  view.loadUrl(&quot;javascript:(functi...
接入腾讯X5浏览器内核天坑指南
接入腾讯X5浏览器天坑指南按文档接入sdk后app打开网页 http://soft.imtt.qq.com/browser/tes/feedback.html结果:显示的是000000,检查了好多遍,运行了给的示例demo,又重新写了demo发现没问题,但是项目中加载这个网页还是000000 按文档接入sdk后app打开网页 http://soft.imtt.qq.com/browser/tes/...
移动端 使用X5 内核 html自动播放视频
1.首先集成配置X5内核1. 集成SDK下载链接: https://x5.tencent.com/tbs/sdk.html如果是Android Studio用户将 相应的jar包放在 jniLibs 文件夹下,如果是Eclipse用户,放在libs文件夹下即可。x5暂时不提供64位so文件,为了保证64位手机能正常加载x5内核,如果使用是Eclipse则需要将所有的.so文件都放置在so加载目录:
腾讯X5内核使用 Android WebView 的一些小问题
公司做个商城,然后我就简单的做个启动引导页,然后用个原生WebView套一下,加个加载动画,解决下第三方登录支付的返回问题,这些问题以前也搞过,哎哟,俩小时,一个项目OK了,沾沾自喜中。 然后过了几天,老板就开始反馈,APP加载太慢了,滑动卡顿,然后叫我组解决。然后我想了下,已经设置了延时加载图片,你这个图片那么多,卡卡的怪我咯,想了想,哎,想在下面这个方法中搞个图片压缩替代 1 @O
腾讯X5内核使用:去掉滚动按钮
系统WebView webView.setHorizontalScrollBarEnabled(false);//水平不显示 webView.setVerticalScrollBarEnabled(false); //垂直不显示 X5 WebView //禁用滑动按钮 if (mWebView.getX5WebViewExtension() != null) ...
腾讯X5内核 在线视频播放 使用说明 By Terry
在线播放视频是一个很常用的功能。但有的视频文件格式不统一,具体播放功能实现起来可能会遇到各种问题!!怎么办?直接第三方,又简单又好用。          X5内核集成了HTML5的一些特效功能以及在线播放功能,这里先重点说一下,在线视频播放的使用。集成起来很简单。 点击下载Demo 1.导入jar包  demo工程里的jar,so文件导入 2.初始化
Webview/X5WebView加载H5页面中的图片不显示问题
一、问题描述:在android4.4的手机上是可以显示H5页面中的图片,但测试机为android 6.0,7.0,8.0,就不行。        我的H5的地址是:https://www.abc.com/new/103        我的H5中的图片地址:http://178.156.152.1/dfeafefeadfe.jpg 如下图           二、原因是:Webview在安...
腾讯X5内核,WebView拦截并获取重定向url
如何得到WebView重定向的url呢?
Android 使用WebView 实现播放爱奇艺视频,可全屏(使用的腾讯的X5内核) (一)
参考文章: ANDROID webview解决视频无法播放问题 Android Webview加载网页视频播放遇到的坑 xumingwang / youkes_browser webview加载腾讯视频功能的实现 Android中接入腾讯TBS浏览器WebView的入坑指南 基于WebView的封装,支持原生和腾讯X5内核切换,支持下拉刷新和进度显示并且做了兼容判断 首先,说...
X5 webview 真正 全屏 播放 ,小屏变全屏 一篇就够了 很简单
布局代码如下 <FrameLayout android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="200dp"/> JAVA代码如下。。。 @Bind(R.id.
带进度条的x5WebView
带进度条的X5WebView
微信浏览器取消缓存方法大全
一、添加版本号请求同一个页面的时候,如果url后面的参数不一样,则不会调用微信缓存中的html页面,由此可以解决html页面的缓存问题。例如加个版本号或时间戳a,传统的文件名后带参数的方式: index.js?v=20170705;b,现在多用的md5文件名的方式: index-8a769sh7f9d.js;1www.xxx.com/home.html?v=1.0window.location.h...
基于X5内核的UI自动化
前言 最近无论是在微信、QQ浏览器、微信小程序还是加载X5内核的页面进行UI自动化,都会遇到X5内核自动化问题,这篇进行一个问题的总结。 基础介绍 1、什么是X5内核? X5内核是腾讯基于优秀开源Webkit深度优化的浏览器渲染引擎,搭载在最新一代的手机QQ浏览器上,更快,更便捷。 --百度百科 2、什么是webview? Webview是用来展示网页的view组件,使用web...
接入腾讯TBS浏览器WebViewX5内核,内部页面重新定向加载异常,无法加载的问题处理方法
接入腾讯TBS浏览器WebViewX5内核,内部页面重新定向加载异常,无法加载的问题处理方法 最近做一个项目,加载h5。第一次加载页面正常,h5做了一次重新定向,结果页面就显示不出来了。 最后发现,是因为混淆的问题。代码不混淆就正常,混淆后就不正常了。 下载了混淆策略放到自己的混淆策略里面,加载就正常了。...
canvas使用drawImage()方法绘制img和video的区别
drawImage()简介drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。具体参数 参数 描述 img 规定要使用的图像、画布或视频。 sx 可选。开始剪切的 x 坐标位置。 sy 可选。开始剪切的 y 坐标位置。 swidth 可选。被剪切图像的宽度。 sh
video视频转成canvas(兼容至IE8+,全原生JS)
video视频转成canvas(兼容至IE8+,全原生JS) &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;Do
TBS腾讯X5内核的使用
需求: 前端组做出的Web页面动画效果很炫酷,而且单个内容挺大的,造成WebView加载过慢,老大要求想想办法解决这个问题,不能让用户等待这么久才能加载完成。一、网上找了下,有建议使用以下的方法完成一些优化: (1)WebView缓存 WebSettings webSettings = webView.getSettings(); //设置WebView缓存模
基于WebView的封装,支持原生和腾讯X5内核切换,支持下拉刷新和进度显示并且做了兼容判断
1.首先导入腾讯官方包 tbs_sdk_thirdapp_v2.5.0.1031_36880_sharewithdownload_obfs_20161107_154437.jar,最新的可以自行下载,地址http://x5.tencent.com/ 2.自定义webview控件重写,ScrollWebView.java(腾讯X5)ScrollWebViewNative.java(
Android控件WebView集成腾讯的X5Web内核
最近公司App项目里要做活动,活动界面是调用H5展示,里面有转盘抽奖、GIF图片等,由于原生的WebView在每个机型上不能保证都能使用(测试了几个机型,有的会显示一个空白界面,不过网页已经加载完成了,就是不显示界面),所以集成腾讯浏览器服务(TBS),TBS可以解决上述问题
canvas写入视频 video
canvas写入video元素     &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; vi
关于微信H5自动播放视频-canvas实现逐帧动画效果加音频
项目需求   用户进入页面自动播放一段小视频 解决方案一   利用 JS reload 之后执行 video.play 和 video  autoplay 都只能在WEB段实现, 但是到了移动端就执行不了   因为项目应用了微信的JS-SDK,所以只需要做兼容微信内置浏览器   想到微信JS-sdk 的WeixinJSBridgeReady 的方式 执行document.addEventListe...
如何解决Android Canvas画图,不能动态展示在界面上的问题
最近用Canvas画图,发现画图的过程不能实时显示在ImageView上,虽然尝试了以下三种方法,仍然不行按照google的一些建议添加了setWillNotDraw(false); 也不行把画图过程写在onDraw里面,每隔一段时间imageView.invalidate(), 也不行。发现onDraw没有被调用的到。后来又更改代码使得onDraw隔一段时间被调用一次,但是每次onDraw调用,...
如何退出微信X5同层播放器?
H5同层播放器接入规范:https://x5.tencent.com/tbs/guide/video.html Android端的微信有一个神奇H5(X5)同层播放器。为啥神奇?这里不能骂脏话咱们还是换一个话题吧。 开启X5同层播放器的方法 在video标签上加上x5-video-player-type=&quot;h5&quot; x5-video-player-fullscreen=&quot;true&quot; 就开启...
canvas的drawImage()绘图片不显示问题
&lt;canvas id="myCanvas" width="200" height="100"&gt;&lt;/canvas&gt; var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image(); img.src="w3c.gif"; cxt.drawImage(img...
canvas如何简单粗暴地载入视频
canvas加载视频和图片是一样的,使用drawImage,区别就是给一个定时器不停的抓取每帧的画面,放入Canvas画布里面,这个办法十分的简单粗暴。(粗粗粗粗~~~) 而且可以达到神同步,当视频暂停,canvas里面的视频就暂停,当视频再次开始播放,canvas里面的视频也再次播放。 html: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;hea...
引入腾讯x5内核(未结)
引入腾讯X5内核的with download版本 tbs_sdk_thirdapp_v2.1.2.1096_36511_withdownload_obfs_20160727_105857.jar 很诡异,知道是个暂时的测试版,但是就是诡异,我只是导入了jar包,没有像官方说的那样导入sdk key就可以跑起来了。虽然第一次无法调用系统内核,但是第二次就是x5内核了,我将程序多次卸载重装后第二次都
关于APP接入TBS_X5浏览服务的初始化的坑
关于导入TBS X5的腾讯浏览服务内核的初始化64位不兼容的问题,官方有些许不清楚的地方指正。
canvas学习笔记(canvas画不出图)
一、刚开始接触canvas的时候使用的是JQuery而不是JavaScript,出现了画不出来图: 1:使用JavaScriptvar cas=document.getElementById('canvas').getContext('2d');//这个是使用JavaScript的方法,这个没有问题。 2:使用JQueryfunction drawLine(){ var ctx = $("
腾讯x5在线打开pdf遇到的一些问题
1.在使用 QbSdk ,还是选择 TbsReaderView 使用Qbsdk int i = QbSdk.openFileReader(context, filePath, null, new ValueCallback&amp;lt;String&amp;gt;() { @Override public void onReceiveValue(String s) { KLog.d(...
Android中使用x5内核加载网页的实现
前言 由于是使用的腾讯的浏览服务,所以这里大部分介绍的是官网的一些东西,不过自己会做一些复杂使用部分的实现,不至于像官网上介绍的笼统。 联系方式 这里用的是TBS腾讯浏览服务。 官网地址是 https://x5.tencent.com 微信公众号:腾讯浏览服务 论坛 http://bbs.mb.qq.com/forum-112-1.html ( 开发者反馈论坛 ) 反馈 http...