uniapp打包的H5，在系统自带的浏览器上没问题，国内浏览器video组件会被拦截，操作按钮会有下载功能

最新推荐文章于 2024-02-26 10:33:10 发布

麻烦少女zhao

最新推荐文章于 2024-02-26 10:33:10 发布

阅读量504

点赞数 9

分类专栏： Uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/lily19970107/article/details/134644843

版权

Uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

失败一：video组件的各种方法没法实现，用canvas实现，国内浏览器黑屏

这个我之前想的是给他转一下形式，走个迂回路线，但是，不愧是大浏览器，防的死死的～

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5-Video播放视频，canvas绘制视频</title>
    </head>
    <body>
        <p>左侧为HTML5-video标签播放的视频，右侧为canvas绘制的视频</p><video id="myvideo" controls width="270" autoplay="autoplay" muted>
            <source src="https://www.runoob.com/try/demo_source/movie.mp4" type='video/mp4'>
        </video>
        <canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">Your browser does not
            support the HTML5 canvas tag.
        </canvas>
        <script>
            var v = document.getElementById("myvideo");
            var c = document.getElementById("myCanvas");
            ctx = c.getContext(
                '2d'
            ); // 每 20 毫秒，代码就会绘制视频的当前帧
            v.addEventListener('play', function() { //播放
                var i = window.setInterval(function() { ctx.drawImage(v, 0, 0, 270, 135); }, 20);
            }, false);
            v.addEventListener('pause', function() { //暂停
                window.clearInterval(i);
            }, false);
            v.addEventListener('ended', function() { //结束
                clearInterval(i);
            }, false);


        </script>
    </body>
</html>

其实最后我并没有办法解决这个问题，网上查阅了很多资料，有说联系浏览器的，我们这个就是不出名的小软件，根本搭不上那条线，可能你在操作的时候发现百度浏览器好了，但是还有夸克浏览器等，最后经过项目组沟通，选择只允许在微信浏览器访问，这样问题就好解决多了～

其中可能会有一个小问题，如果你是在项目onLaunch的时候做限制，让他判断是否是浏览器环境然后其他逻辑，在百度浏览器没问题，夸克非也，很惊喜呦～

这里是我最后的处理，代码不是全的，重点是‘ 只在微信内置浏览器运行’这里的内容，意思是最好放到请求中去，这样能更好的规避没发现的各种神奇的浏览器～

return new Promise(function (resolve, reject) {
    // 只在微信内置浏览器运行
    var useragent = navigator.userAgent.toLowerCase();
    if (useragent.indexOf('micromessenger') === -1) {
      // micromessenger微信独有标识
      var opened = window.open('about:blank', '_self');
      opened.opener = null;
      opened.close();
      window.location.href = '';
      return alert('请在微信客户端访问本页面');
    }
    clearTimeout(ToastBox);
    ToastBox = setTimeout(function () {
      //当接口返回的时间小于300ms不显示加载框优化用户体验
      uni.showLoading({
        title: '加载中'
      });
    }, 300);

麻烦少女zhao

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
uniapp打包的H5，在系统自带的浏览器上没问题，国内浏览器video组件会被拦截，操作按钮会有下载功能

其实最后我并没有办法解决这个问题，网上查阅了很多资料，有说联系浏览器的，我们这个就是不出名的小软件，根本搭不上那条线，可能你在操作的时候发现百度浏览器好了，但是还有夸克浏览器等，最后经过项目组沟通，选择只允许在微信浏览器访问，这样问题就好解决多了～这里是我最后的处理，代码不是全的，重点是‘ 只在微信内置浏览器运行’这里的内容，意思是最好放到请求中去，这样能更好的规避没发现的各种神奇的浏览器～这个我之前想的是给他转一下形式，走个迂回路线，但是，不愧是大浏览器，防的死死的～
复制链接

扫一扫