小标
2018-11-15
来源 :
阅读 1242
评论 0
摘要:本文主要向大家介绍了Flash基础入门之chrome 45以上flash被拦截的一种可能解决方案,通过具体的内容向大家展现,希望对大家学习Flash基础入门有所帮助。
本文主要向大家介绍了Flash基础入门之chrome 45以上flash被拦截的一种可能解决方案,通过具体的内容向大家展现,希望对大家学习Flash基础入门有所帮助。
chrome 45以上不自动播放"非必要"flash的一种可能解决方案chrome 45以上flash被拦截的一种可能解决方案
问题
1、chrome 45以上(包含45)版本默认不自动播放"非必要"flash,对于非自动播放的广告,chrome会在flash上悬浮一个播放按钮,点击后可播放2、对于国内情况来说,flash目前还是很多中小客户的主力素材,展现效果好,且技术成熟。3、目前flash广告大多数使用覆盖a链接来进行落地页和tracker的承载,无法点中chrome贴心提供的播放按钮,结构大概如下:
思路
对于chrome, 什么是"非必要"
非必要在chrome定义上大概包含以下两点:
不在同域尺寸不够大(小于398*298,这个我做过测试,确实如此,也不知道这两个数字怎么拍脑门想出来的,不贴demo了)参考文件:https://news.ycombinator.com/item?id=10133771 文章内有两个chrome源码的连接,也可以到下面去查看
https://code.google.com/p/chromium/codesearch#chromium/src/content/renderer/pepper/plugin_power_saver_helper.cc&sq=package:chromium&type=cs&l=87https://code.google.com/p/chromium/codesearch#chromium/src/content/renderer/pepper/plugin_instance_throttler_impl.cc&q=plugin_instance_throttler_impl&sq=package:chromium&type=cs&l=5尝试一种解决思路
在广告中,由于各种情况限制,要求广告主的素材同域肯定是不方便的,所以只能从尺寸上解决 通过尝试,可以在flash渲染的时候暂时把尺寸设置成大于398*298,在实际展现的时候在设置回来,这里需要createFlash的方法动下小手脚
** 这里的尺寸有几个注意点: 1、不只是flash自己的尺寸而是真正展现的尺寸,有可能flash设置了足够大,但是它外面包含的容器overflow了,导致flash实际尺寸没有这么大,这样也是无法自动播放的 2、经过尝试,opacity:0 的flash只要尺寸足够大,也是可以自动播放的
直接看代码
改造过的swf.createHTML
1 /**
2 * 创建flash的html
3 * @param {Object} options 选项
4 * @return {String} flash的html
5 * //www.w3help.org/zh-cn/causes/HO8001 修改成仅用embed标签渲染flash
6 */
7 sinaadToolkit.swf.createHTML = function (options) {
8 options = options || {};
9 var item,
10 k,
11 tmpOpt = {},
12 encodeHTML = sinaadToolkit.string.encodeHTML;
13
14 // 复制options,避免修改原对象
15 for (k in options) {
16 tmpOpt[k] = options[k];
17 }
18 options = tmpOpt;
19
20 var vars = options.vars;
21
22 // 初始化flashvars参数的值
23 if (‘string‘ === typeof vars) {
24 options.flashvars = vars;
25 } else {
26 var fvars = [];
27 for (k in vars) {
28 item = vars[k];
29 fvars.push(k + "=" + encodeURIComponent(item));
30 }
31 options.flashvars = fvars.join(‘&‘);
32 }
33
34 var str = [];
35
36 // 使用embed时,flash地址的属性名是src,并且要指定embed的type和pluginspage属性
37 options.name = options.id || ‘sinaadtk_swf_uid_‘ + (sinaadToolkit.swf.uid++);
38 options.align = options.align || ‘middle‘;
39 options.src = options.url || ‘‘;
40 options.type = ‘application/x-shockwave-flash‘;
41 options.pluginspage = ‘//www.macromedia.com/go/getflashplayer‘;
42
43 //这里是hack的关键处
44 //因为尺寸小于398*298,在chrome的45以上版本会自动暂停播放flash
45 //所以这里只针对这两个条件进行增加逻辑处理
46 //在生成的swfHTML的前面增加注释节点,用来保存当前flash的name,实际宽度和实际高度,格式如下
47 //
48 //在后面配套使用的过程中判断是否有这个注释来决定是否需要恢复flash的尺寸
49 //@link: https://news.ycombinator.com/item?id=10133771
50 if (sinaadToolkit.browser.chrome > 44 && !(options.width >= 398 && options.height >= 298)) {
51 str.push(‘
‘);
52 options.width = ‘398px‘;
53 options.height = ‘298px‘;
54 }
55
56 delete options.id;
57 delete options.url;
58 delete options.vars;
59
60 str.push(‘<embed‘);
61
62 // 在firefox、opera、safari下,salign属性必须在scale属性之后,否则会失效
63 // 经过讨论,决定采用BT方法,把scale属性的值先保存下来,最后输出
64 var salign;
65 for (k in options) {
66 item = options[k];
67 if (item || item === false || item === 0) {
68 if ((new RegExp("^salign\x24", "i")).test(k)) {
69 salign = item;
70 continue;
71 }
72
73 str.push(‘ ‘, k, ‘="‘, encodeHTML(item), ‘"‘);
74 }
75 }
76
77 if (salign) {
78 str.push(‘ salign="‘, encodeHTML(salign), ‘"‘);
79 }
80 str.push(‘/>‘);
81
82 return str.join(‘‘);
83 };
解析并将生成的flashhtml填充进节点,根据条件决定是否恢复尺寸
1 sinaadToolkit.swf.fill(element, html) {
2 var fake, flash, cachePosition;
3 //如果匹配中
开头的
4 if ((fake = html.match(/<\!--\s*fakesize\:([0-9a-za-z_]+)\|(\d+)\|(\d+)\s*-->/))) {
5 //防止抖动
6 cachePosition = element.style.position;
7 cacheOpacity = element.style.opacity;
8 element.style.position = ‘absolute‘;
9 element.style.opacity = 0;
10 element.innerHTML = html;
11
12 //稍微延迟并恢复尺寸,这里的延迟没有经过考证
13 setTimeout(function () {
14 flash = core.swf.getMovie(fake[1]);
15 flash.width = fake[2];
16 flash.height = fake[3];
17
18 //恢复原来状态
19 element.style.position = cachePosition || ‘relative‘;
20 element.style.opacity = cacheOpacity || 1;
21 }, 100);
22 } else {
23 //否则直接填充就是了
24 element.innerHTML = html;
25 }
26 };
对于重排的性能肯定会有影响,等后续做测试和优化,先当一种想法
以上就介绍了Flash的相关知识,希望对Flash有兴趣的朋友有所帮助。了解更多内容,请关注职坐标常用软件Flash频道!
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了

请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号