小米自带浏览器怎么清除默认设置

本文介绍了如何在小米浏览器等默认浏览器中清除视频标签的默认设置,通过将视频源转换为blob对象避免浏览器劫持。作者还提供了使用Vue实现的代码示例,帮助前端开发者解决Android默认浏览器的兼容性问题。
摘要由CSDN通过智能技术生成

大家好,小编来为大家解答以下问题,小米自带浏览器怎么清除默认设置,如何清除小米浏览器默认设置选项,今天让我们一起来看看吧!

这篇文章主要介绍了怎么关闭小米浏览器的默认浏览器模式,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获,下面让小编带着大家一起了解一下Deepl降重

一、问题

这个问题其实一度困扰我很久了,类似小米浏览器、魅族浏览器等等手机的默认浏览器上,video标签的样式修改会无效,且一旦播放就会全屏,层级提升到最前,并且有不可修改的控制条,对前端做美化极其的不友好。

在解决这个问题的路上,尝试过很多方案,比如转换成mpeg,用canvas渲染,或者修改成序列帧,但是不是画质太低,就是有性能开销大python for语句用法。也尝试过使用videojs之类的播放器,但是很可惜 一旦开启autoplay属性 就会被浏览器劫持video组件。

在之后,偶然间研究B站的flv.js的时候,发现了意外的惊喜,video居然没有被浏览器劫持,之后经过仔细研究,最终得出结论,如果video的src绑定的是blob对象,也就是视频流的话,安卓默认浏览器因为认不出数据格式,就不会劫持video标签的渲染。

在这之后,事情就简单多了,只需要把需要播放的文件转换成流,喂入video就完事了,不过微信端由于软件的设置,必须有交互动作才可以播放视频,这点需要注意。

二、解决

我们项目是vue写的,原生js或者react理论上同理,部分代码如下:

<template>
    <div class="home-page">
        <video x5-video-player-type="h5"
                   :src="videoData"
                   :poster="require('@/assets/video/poster.jpg')"
                   autoplay
                   muted="muted"
                   ref="loopVideo"
                   loop
                   webkit-playsinline=""
                   playsinline=""
                   preload="metadata"
                   v-if="videoData!==null"
            >
         </video>
    </div>
</template>

<>
export default {
    name: 'HomePage',
    components: {},
    data() {
        return {
            videoData:null,
        }
    },
    props: {},
    watch: {},
    methods: {
        init(){
            let xhr = new XMLHttpRequest();
            let _this = this;
            /*通过get请求获取项目中的mp4文件流,因为axios修改responseType稍微有点麻烦,所以干脆写原生xhr请求了 */
            xhr.open('GET', require('@/assets/video/loopVideo.mp4'), true);
            //设置请求结果类型为blob
            xhr.responseType = 'blob';
            //回调
            xhr.onload = function(e) {
                if (this.status == 200) {
                    //创建blob对象,并把值赋给video的src
                    _this.videoData = URL.createObjectURL(this.response);
                }
            };
            xhr.send();
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.init()
    }
}

希望这篇文章可以帮助苦于部分安卓默认浏览器兼容的人。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值