图片 1

程序员提升学习效率的3个方法,移动端视频h5表现问题汇总

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。通过
CSS3,web 设计师可以使用他们喜欢的任意字体。

  1. 同屏播放视频

    video src=”” x-webkit-airplay=”true” webkit-playsinline=”true” playsinline /

  2. 移动端视频预加载

图片 1

当您找到或购买到希望使用的字体时,可将该字体文件存放到 web
服务器上,它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在
CSS3 @font-face 规则中定义的。

由于移动端不能预加载视频,所以hack一种方案:监听WXJSBridge
WeixinJSBridgeReady,先播放再暂停,这样当触发播放视频时就不用等待,就不会出现黑屏情况。

才3个方法?如果你希望的是“提升效率的10大方法”,“程序员必看的20个学习法”……很抱歉,本文不适合你。在精而不在多,一个人若能够学会,并且长期践行这其中一种方法,便已经能够走在很多人前头了。

@font-face的语法规则:

// 预加载视频hackfunction preload() { document.getElementById('video').play(); setTimeout(function () { document.getElementById('video').pause(); }, 200); }document.addEventListener("WeixinJSBridgeReady", preload, false);

首先,我有一个非讲不可的笑话。

@font-face { font-family: YourWebFontName; src: source [format][,source [format]]*; [font-weight: weight]; [font-style: style]; [font-stretch: stretch]; [unicode-range: unicode-range];}
  1. 滑动播放视频

母校有位老教授,课上的异常好。有一回给新生上实验课,他从讲桌下拿出一个烧杯,里边装着一坨大便:

font-family定义字体的名称,src用来指定字体文件地址,可以是相对地址或者绝对地址。@font-face规则的各描述属性说明如下::

微信安卓环境下需要在touchmove事件中阻止掉默认事件,否则不能触发视频播放

同学们,既然你们选择搞科研,将来靠这个养家娶老婆,第一样重要的事,就是要有实验精神。你们有实验精神吗?

描述符

// 滑动或点击播放视频ele.addEventListener('touchmove', function (event) { event.preventDefault();});ele.addEventListener('touchend', function () { video.play();})

同学们齐声答道:有。老教授跟着就说:

  1. 微信安卓下视频异常表现

很好,这里有大便一坨,我带头,大家一起来尝一尝它的味道,帮助我们了解大便。

描述

由于微信安卓版本基于x5内核,视频会出现全屏按钮,而且去不掉,会误导用户点击,所以一个想法是在微信环境下将视频一帧帧绘制到canvas上,缺点是低端机型可能会出现花屏情况。

说完便拿手指伸进烧杯蘸了一下,然后放到嘴里舔了舔。同学们见老师都亲自示范,便一个个也都硬着头皮上去把大便尝了一遍。看到大家都尝完,老教授笑嘻嘻地说:同学们做的很好,你们对科研表现出了非同寻常的献身精神。

font-familyname必需。规定字体的名称。srcURL必需。定义字体文件的
URL。font-stretchnormalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded可选。定义如何拉伸字体。默认是
” normal”。<=””
td=””>font-styleormalitalicoblique可选。定义字体的样式。默认是
“normal”。font-weightnormalbold100200300400500600700800900可选。定义字体的粗细。默认是
“normal”。unicode-rangeunicode-range可选。定义字体支持的 UNICODE
字符范围。默认是 “U+0-10FFFF”。

且微信安卓环境下视频播放时,整个页面如果有bgm,也会暂停bgm,当视频播放完毕时,才会继续播放视频;ios下不会。

正当同学们为自己的亲身尝大便精神骄傲的时候,老教授又讲到:

字体格式有太多选择,不幸的是始终没有一个能在所有的浏览器上通用。这意味着,你必须使用多种字体的方案来保持用户跨平台的一致性体验。当前,在web上使用各种不同字体格式有:TTF、OTF、WOFF、EOT
和 SVG 。具体不同字体在各品牌浏览器的支持情况,这里不一一介绍。

// 绘制视频到canvasfunction video2canvas(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d');//获取绘图环境 var video = document.getElementsByTagName('video')[0]; video.play(); video.addEventListener('play', function(){ setInterval(function(){ ctx.drawImage(video, 0, 0, 200, 200); }, 20); });}

我刚才说,搞科研第一样重要的是要有献身精神;但是,还有样东西比这个更重要,那就是学会观察。大家觉得自己有观察力么?我看没有。我刚才伸进烧杯戳大便用的是中指,放进嘴里的是我的食指。

在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。为了使@font-face达到更多的浏览器支持,Paul
Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

部分机型开始播放出现黑屏。

为什么要讲这个故事?并不是告诉大家要有观察力,而是要有好的方法。这位老教授就有好的授课方法;用“尝大便”换来要有观察力的教训,学生大概一辈子都不会忘。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:, , , , , , , , , , , ,
网站地图xml地图