v-html里的video手机打开是白屏
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了v-html里的video手机打开是白屏相关的知识,希望对你有一定的参考价值。
您好,您的问题很有意思。在html中,如果video标签在手机上打开是白屏,可能是由于以下几个原因:1. 没有指定video标签的宽度和高度,或者指定的宽度和高度不正确;
2. 没有指定video标签的src属性,或者指定的src属性不正确;
3. 没有指定video标签的type属性,或者指定的type属性不正确;
4. 没有指定video标签的controls属性;
5. 浏览器不支持video标签;
6. 视频文件的编码格式不正确;
7. 视频文件的编码格式不支持;
8. 视频文件的编码格式不兼容;
9. 视频文件的编码格式不完整;
10. 视频文件的编码格式不正确,或者视频文件的编码格式不支持。
因此,如果video标签在手机上打开是白屏,建议您检查以上几个原因,以便找到问题的根源,并解决问题。 参考技术A v-html里的video手机打开是白屏,是因为v-html没有经过,手机厂商的适配,所以会造成有些功能用不了,经过手机厂商适配以后就可以使用了 参考技术B v-html里的video手机打开是白屏的原因可能是:
1. 视频格式不支持:手机浏览器可能不支持v-html里的视频格式,可以尝试更换视频格式;
2. 视频编码不支持:手机浏览器可能不支持v-html里的视频编码,可以尝试更换视频编码;
3. 视频文件大小过大:手机浏览器可能无法加载v-html里的视频文件,可以尝试压缩视频文件;
4. 网络环境不佳:手机浏览器可能无法加载v-html里的视频文件,可以尝试更 参考技术C 我是html5的前端开发工程师显示空白大部分原因是浏览器的问题吧,最好还是尝试换市面上主流的手机浏览器了,手机浏览器大多数不支持html5
这样的问题是有三种情况造成的,第一就是你的控件问题,有的网站有自己特有的控件,只有安装它的控件视频才能很好的播放,第二就是你的插件问题,请你查看一下你的插件是不是最新版本的。第三就是对你的IE的internet临时文件进行清理,然后再打开视频看下。做完第三步再做前两步,希望可以帮到你 参考技术D v-html里的video手机打开是白屏可能是你手机下载的软件不兼容,要是这种原因的话 ,只要卸载你的一些软件就可以了,避免让它们相互之间发生冲突。
Vue单页面在ios10系统上出现白屏的bug
一个bug 你用Vue做了一个单页面应用,它在一切设备上都工作正常,但是突然有一天,你的测试和你说,这个网站在iOS 10上跑不起来,怎么办? 于是你打开你电脑上的Chrome浏览器,工作正常;打开Safari浏览器,工作正常;打开iOS 11手机,工作正常;打开各种安卓手机,工作正常。但是在iOS 10的手机上,不论是微信浏览器,还是Safari浏览器,都只能看见一个白白的屏幕。 于是你把手机连上电脑,在电脑端的Safari里,看到了如下的错误: SyntaxError: Cannot declare a let variable twice: ‘e‘. 可是你没有写过这样的代码,你怎么可能把一个名为e的变量定义两次?你打开代码,看到了这样美丽的代码: let e = e => { console.log(e); for (let e of [1, 2, 3]) console.log(e); }; 虽然这段代码看上去比较奇怪,但是语法上有任何问题吗?哥就愿意定义一个名为e的函数,而这个函数的唯一入参名称也为e,并且哥的for循环体里还愿意再定义一个名称为e的变量,es6的变量作用域允许我们这样做,此e和彼e互不干扰,不对吗?况且很显然,这段代码不是人写的,而是我们在执行npm run build的时候编译产生的。 其实我们都没有错,我们也没写错,uglify也没搞错,错的是Safari本身。他们在第十七万一千零四十一号bug中承认了自己的错误: We incorrectly throw a syntax error when declaring a top level for-loop iteration variable the same as a parameter 当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。 看,多么谦逊的态度。所以你也不用太纠结于一个白屏幕,只要找到解决方法就好了。方法其实很简单: 进入build文件夹; 找到webpack.prod.conf.js文件; 在UglifyPlugin的定义里添加关于mangle的选项,使它变成下面这个样子: new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false }, mangle: { // 加入这玩意儿即可 safari10: true } }, sourceMap: config.build.productionSourceMap, parallel: true }), 然后这个世界就太平了。 为了避免所有这些不必要的麻烦,我给vue-cli提的一个PR已被接受,在工具里缺省加入了这个选项,这样大家以后就不会遇到这个问题了。 关于这个bug的问题描述在这里,解决方案在这里,给vue-cli提的PR在这里,供深挖细掘的人参考。 另一个bug 实际上,除此之外,还有另外一个bug也会影响到vue网页在iOS 10上的展现,特别是当你用到广为流传的Swiper插件的时候。这是因为Swiper插件中用到了ES6的语法a = b ** c,a是b的c次方,而iOS 10的Safari里不认识这样的语法,认为这是一个错误,所以你需要让Swiper经过babel的包装,而缺省状态下babel是不对node_modules里的模块进行编译的。相关的issue见这里。 解决方法是在项目根目录下新建一个文件vue.config.js,在里面添加如下语句: module.exports = { chainWebpack: config => { config.rule(‘js‘).include.add(/node_modules/(dom7|swiper)/.*/) } } 至止为止,通常情况下你的vue网页已经可以完美地在iOS 10上的Safari里展现了。
以上是关于v-html里的video手机打开是白屏的主要内容,如果未能解决你的问题,请参考以下文章