HTML5 广告教程（二）
六、HTML5 API
许多人在访问一个新的国家时会请翻译或导游。他们依靠的是一个对这片土地和这里的人了如指掌的人，一个能告诉你当你到达时该做什么和不该做什么的人。在这种情况下，把新国家想象成所有现代浏览器技术，把翻译器想象成用于与这些技术通信的应用编程接口(API)。要在这个国家或任何一个新的国家把事情做好，你需要“说到做到”——这基本上就是 API 所做的。它们是一个通信层，通过代码通信来提供对特定技术形式的访问。
在本章中，我们将涉及很多 HTML5 APIs。既然到目前为止你已经了解了一些，那就认为你已经有了一个良好的开端。canvas、CSS3 甚至 SVG 都是 API，本章将回顾新兴的 HTML5 浏览器带给我们的一些新 API。然而，我们不会涵盖所有这些，因为在本书的范围内有太多的事情要做。然而，你可以在 platform.html5.org 看到它们中的大多数。另外，请记住，大多数 API 并不是实际 HTML5 规范的一部分。有几个是从 HTML5 规范开始的，后来被移到他们自己的标准中，因此默认采用了 HTML5 这个总括术语。虽然这些 API 中的大多数都需要某种级别的 JavaScript 来操作，但是它们都做不同的事情，并且以不同的方式运行。此外，研究它们将完全改变你在浏览器中使用标准的方式。相信我！所以让我们开始挖掘 HTML5 的真正肌肉。一定要戴上编码的帽子，因为 HTML5 APIs 严重依赖 JavaScript。
拖放式
首先，我们来聊聊拖放(DnD) API，这是 HTML5 规范中相对较新的一项。这个 API 提供了一个非常简单的方法来在页面或内容上拖放元素，就像一个广告单元。此外，它需要最少的代码来实现。最初由微软在 Internet Explorer 浏览器的第 5 版中创建，由于 API 规范中的错误、浏览器中的实现以及围绕拖动事件的使用，它经历了一些开发人员的反弹(至少可以这么说)。详见quirksmode . org/blog/archives/2009/09/the _ html 5 _ drag . html。
经过一些改进，由于 IE、Opera、Firefox、Safari 和 Chrome 都以某种方式支持它，这个 API 现在为现代浏览器环境带来了原生的拖放支持，而无需第三方插件或 JavaScript 库。只需在您希望用户拖动的任何 DOM 元素上添加一个“draggable = true**”**属性(同时通过 JavaScript 在“拖放区”上包含一些基本的事件侦听器/处理程序)，您就可以指示浏览器将元素放到哪里。
注意默认情况下，元素 img 和 a(带有 href)是可拖动的，但是请记住，不是所有的元素(例如图像)都可以是拖放区域。
拖放式 API 已经走过了漫长的道路。在使用浏览器的原生功能之前，开发人员和设计人员需要使用 jQuery 等外部库或 Flash 等插件。感谢 HTML5 规范，默认情况下，它现在是现代浏览器的主要组件。几乎任何东西都可以拖动:图像、链接、文本——实际上是任何 DOM 节点。还要注意的是，对原生浏览器的支持使得网络速度更快，反应更灵敏，对我们来说，就是广告创意。只要你能利用浏览器的本地 API，就去做吧！毕竟，标准化和构建硬连接到浏览器环境中的用户友好的 API 是 HTML5 和本书的全部内容。清单 6-1 概述了如何在一个非常简单的广告中使用 DnD，其中发布者是一个产品制造商，广告是一个产品拖放区，通过拖放保存。
清单 6-1 。 拖放示例
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#ad {
width:300px;
height:250px;
border:1px solid #000;
overflow: hidden;
}
#logo {
position: absolute;
top: 5px;
left: 1px;
width: 300px;
height: 250px;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 40px;
text-align: center;
color: #fff;
z-index: 3;
}
#cta {
position: absolute;
top: 220px;
left: 1px;
width: 300px;
height: 250px;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: larger;
text-align: center;
color: #fff;
z-index: 2;
}
#dropper {
position: relative;
top: 25px;
left: 80px;
z-index: 101;
}
#dropArea {
position: absolute;
top: 60px;
left: 10px;
width: 280px;
height: 150px;
background: #f2f5f6; /* Old browsers */
background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
border: 1px dashed;
border-radius:10px;
z-index: 81;
}
#background {
position: absolute;
top: 1px;
left: 1px;
width: 300px;
height: 250px;
background: #c0c5d6; /* Old browsers */
background: -moz-linear-gradient(top, #c0c5d6 0%, #3f4c6b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c0c5d6), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c0c5d6 0%,#3f4c6b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c0c5d6 0%,#3f4c6b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c0c5d6 0%,#3f4c6b 100%); /* IE10+ */
background: linear-gradient(to bottom, #c0c5d6 0%,#3f4c6b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0c5d6', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
z-index: 0;
}
/******Mock Publisher Content********/
#publisherContent {
position: absolute;
top: 300px;
left: 100px;
}
#pubProduct {
position: absolute;
top: 0px;
left: 0px;
width:100px;
height:100px;
background: url(hammer.png) no-repeat;
z-index: 90;
}
</style>
<script type="text/javascript">
//fires when product is over the drop area
function allowDrop(event) {
//cancel default for drop event to fire
event.preventDefault();
console.log("YOU'RE OVER THE DROP AREA!!!")
}
function dropArea(event){
var data = event.dataTransfer.getData("Text");
var dropArea = document.getElementById('dropper');
var element = document.getElementById(data);
dropArea.appendChild(element);
console.log(element)
}
//initial drag when product is selected
function drag(event) {
var dropImg = document.createElement("img");
dropImg.src = "add.png";
dropImg.width = "48px";
dropImg.height = "48px";
dropImg.style.opacity = "0.5";
event.dataTransfer.effectAllowed='all';
event.dataTransfer.setData("Text", event.target.getAttribute('id'));
event.dataTransfer.setDragImage(dropImg, 25, 25);
}
function adInit(event) {
console.log(event.type)
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</head>
<body>
<div id="publisherContent">
<div id="pubProduct" draggable="true" ondragstart="drag(event)"></div>
</div>
<div id="ad">
<div id="logo">Shopping Cart</div>
<div id="cta"> Drag Products To Drop Area! </div>
<div id="dropArea" ondrop=dropArea(event) ondragover=allowDrop(event)>
<div id="dropper"></div>
</div>
<div id="background"></div>
</div>
</body>
</html>
希望您正在使用您最喜欢的文本编辑器。现在让我们看一下代码。首先，我们使用清单中的 CSS 做一些基本的广告设置和设计。第二，在 HTML 中，我们模拟发布者内容(publisher content)并将发布者页面中的模拟产品放到广告区域(ad)。接下来，在我们的 publisherContent div 中，有一个示例产品 pubProduct，它的 draggable 属性被设置为 true，并且有一个事件 ondragstart，要用名为 drag(event) 的函数来处理。
注意你必须在“事件”中传递参数；否则代码将无法正常运行。
接下来，我们通过利用 ondrop 和 ondragover 事件在广告中添加更多的事件处理程序。这些事件分别附加 dropArea(事件)和 allowDrop(事件)。接下来，使用 JavaScript 编写我们的函数。对于拖动，我们通过调用 setDragImage() 方法并向其传递三个参数来使用带有来自 dataTransfer 对象的方法的拖动图像。第一个参数是图像资源，第二个和第三个是图像的 x 和 y 坐标位置，即鼠标开始拖动的位置。如果您希望在用户拖动时为元素创建自定义图像，这可能会很有帮助。
接下来，我们处理 allowDrop 方法，它表示何时可以将产品放到内容区域。在这种情况下，我们使用整个广告作为拖放区。
注意默认情况下，dragOver 和 dragEnter 事件不能放下元素。您必须通过调用 event.preventDefault()显式取消这些默认浏览器操作；删除一个元素。
最后，一旦你知道你被允许放下产品，一旦用户放开鼠标，这个动作可以用 dropArea 处理程序来处理。在 dropArea 方法中，我们通过再次调用 dataTransfer 对象来获取产品的数据，但这次我们通过编写 var data = event . data transfer . get data(" Text ")来检索数据。有了数据对象，我们就可以将数据注入到广告的不动产中。用户现在看到了广告区域内的元素，如图 6-1 中的展示了 。
图 6-1。展示了广告的拖放示例
我希望你都明白了；我知道这很多。如果你没有，你可以通读一遍前面的代码，并为后续学习的访问html5laboratory.com/drag-and-drop.php。对于一些用户来说，DnD 是一块隐藏的宝石，尤其是在广告环境中，所以如果它是广告体验中的一个特定功能，一定要包括一个相关且清晰的行动号召，以确保你的用户采取适当的行动。
广告中的拖放
有了一些基本的 DnD 入门知识，让我们想想拖放(DnD) API 如何应用于广告领域。起初，我认为 DnD API 可以带来玩互动游戏的新方法。例如，它允许用户更准确地玩国际象棋游戏，因为它类似于用户的自然行为。它可以重新创建一个交互式的购物车体验，用户可以将产品拖到收银台购物车中，购物车会根据放入的产品数量而装满。我认为一旦你开始使用这个 API，使用这个标准的可能性是无限的。
它可以将元素拖到待办事项列表中，以便用户可以在以后打印，甚至可以用于 mix up 益智游戏的功能，其中用户需要为隐藏的提议组装拼图。我还看到 DnD 带来了处理复杂的出版商集成的能力——例如，用户将出版商页面上的精选内容拖放到广告的拖放空间(正如刚才所讨论的)。这可能有点像寻找复活节彩蛋，最终用户在站点内找到相关内容，并通过发现这些“彩蛋”获得特殊待遇
诚然，DnD 仍有相当一部分古怪的问题，但如果你有兴趣深入了解 DnD 的空气污染指数，请前往 html5rocks.com/en/tutorial… dev.w3.org/html5/spec/… 的和的 http://whatwg . org/specs/we B- apps/current-work/multipage/dnd . html # dnd查看目前的规格。
文件
html 5 中更新的文件 API 允许网页内容提示用户选择他们机器上的本地文件，然后在浏览器中阅读这些文件的内容，而不需要服务器端的帮助或插件。这种选择可以通过使用 HTML 输入元素或刚刚学会的 DnD API 来完成。如果你使用 Gmail(谷歌的邮件服务)和一个现代浏览器，当你把文件附加到邮件中时，你很可能在不知不觉中使用了文件 API。你可能会想，“当然，我以前也给电子邮件添加过附件，”但是你知道你可以把这些附件从你电脑的操作系统拖到 Gmail 里吗？DnD 可以让你将文件数据传输到 Gmail 的应用中，但在浏览器中阅读文件会充分利用文件 API。
DnD 和文件 API 一起使用时，会提供与在您的操作系统或桌面 上使用本机应用相同的体验。HTML5 的这一新增功能本质上允许用户将 web 应用视为其本地操作系统(OS)的扩展。如果你要求用户上传他们自己的图片到你的广告单元，这将是一个巨大的帮助。他们所需要做的就是把它从桌面拖到浏览器定义的拖放区——在我们的例子中，它可以是广告。
传统上，文件 API 使用给用户一个基本的输入，允许本地操作系统文件选择器窗口，也允许 HTML 文档引用位于用户文件系统上的文件——但仅此而已。
如今，文件 API 允许用户直接在浏览器中读取各种文件格式的文件，而无需服务器端技术。使用新的 FileReader API，可以将文件读取为字符串、数组缓冲区，甚至是 BLOB (二进制大对象)输入。有了浏览器自带的这些信息，就可以读取、解释、显示甚至操作文件中的二进制信息，然后保存到更新和修改的版本中。通过 JavaScript ，文件 API 提供了一个原生机制来读取文件的数据，并按照您的意愿写入。随着 web 变得更加以应用为中心(正如 HTML5 所希望的)，用户计算机的原生文件系统和 Web 上的应用将变得更加交织在一起。对于许多普通的日常用户来说，Web 和原生操作系统之间的界限将会变得模糊。例如，不需要用户检索保存在他们机器上的名为 someimage.jpg 的素材，文件 API 和文件阅读器 API 可以被附加到 DnD API 上，以无缝集成操作系统和网络应用，甚至允许访问用户的内置摄像头，捕捉位图图像信息并将其保存到网页或广告中——同样，所有这些都在浏览器的原生架构内。
这种方法比仅仅要求用户提供以前保存的图像资源要高级得多，你说呢？此外，您甚至可以使用 XMLHttpRequest (AJAX)方法 从另一个数据源检索信息，并将其作为 BLOB、Array 或 String 对象导入，以便 FileReader API 进行解释，并可能在以后要求用户进行操作。使用 AJAX 方法，这个过程可以在不触发页面刷新的情况下发生，这同样使最终用户可以无缝集成。
记住这一点，让我们看看如何在 JavaScript 中使用文件 API。清单 6-2 要求用户将自己的图像拖入广告体验中。
清单 6-2 。 文件 API 示例
<!DOCTYPE html>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#drop_zone {
width:300px;
height: 250px;
background-color:#999;
border: 1px dashed #000;
}
p {
width: 300px;
}
</style>
<head>
<meta charset=utf-8>
<body>
<div class="percent">0%</div>
<input type=file>
<div id="drop_zone">Drop Zone</div>
<p>Select an image from your machine or drop onto the drop zone to read the contents of the file without using a server</p>
<script>
function adInit(event) {
event.preventDefault();
var upload = document.getElementsByTagName('input')[0];
var progress = document.querySelector('.percent');
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('drop', handleFileSelect, false);
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
var reader = new FileReader();
console.log('Sweet! All File APIs supported');
upload.onchange = function (event) {
var file = upload.files[0];
var img = new Image();
reader.onload = function (event) {
console.log(event.type);
};
reader.onprogress = function (event) {
console.log(event.type);
var percentLoaded = Math.round((event.loaded / event.total) * 100);
progress.textContent = percentLoaded + '%';
console.log(percentLoaded)
};
reader.onloadend = function (event) {
if (!file.type.match('image.*')) {
alert("Not an image!!");
} else {
img.src = event.target.result;
if (img.width >= 300) {
img.width = 300;
}
}
console.log(event.type);
dropZone.innerHTML = '';
dropZone.appendChild(img);
};
reader.onerror = function (event) {
console.log(event.type);
};
reader.readAsDataURL(file);
console.log(reader);
return false;
};
function handleFileSelect(event) {
event.stopPropagation();
event.preventDefault();
//event.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
var files = event.dataTransfer.files; // FileList object.
var file = files[0];
reader.onloadend = function (event) {
console.log(event.target);
dropZone.style.width = "300px";
dropZone.style.height = "300px";
dropZone.style.background = 'url(' + event.target.result + ') no-repeat center';
};
reader.readAsDataURL(file);
return false;
console.log(file)
}
} else {
alert('The File APIs are not fully supported in this browser.');
}
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
如这段代码所示，首先允许用户选择本地计算机上的图像文件，或者通过将标记中的一个区域定义为 drop_zone，将图像拖动到广告的拖放区。一旦加载 DOM 后广告启动，adInit 函数 被触发；它通过获取对 DOM 对象的变量引用来开始。(您可以看到，通过调用 getElementsByTagName、getElementById 和新的 querySelector，我使用了各种方法来获取引用。)一旦用户将图像拖放到拖放区域，我们在创建一个文件读取器引用后运行几个方法，首先调用 upload.onchange，它在输入元素改变状态时处理抓取用户图像文件。第二，我们使用文件阅读器——姑且称之为 reader——并将特定的方法附加到对象上——onload、onprogress、onloadend、onerror 和 readAsDataURL——当用户将图像放到拖放区域时，所有这些方法都会处理特定的命令。最后，我们来关注一下 onloadend 方法，该方法通过编写 drop zone . style . background = ' URL('+event . target . result+')no-repeat center '，通过 CSS 将用户的图片写入 drop_zone 元素中；。一旦发生这种情况，图像就显示在浏览器中，而不需要往返服务器。这显示在图 6-2 中，使用了我桌面上的一个示例图像。
图 6-2。一个图片文件的例子上传
注意通过多重属性，用户可以一次选择多个文件。
广告中的文件访问
现在我们已经让用户能够上传图像，他们可以对文本文件、PDF、PSD——你能想到的都可以——做同样的事情，并让浏览器解析、操作和呈现信息到屏幕上。了解了这些信息后，让我们允许用户将图像从桌面拖放到广告的实际区域，并让他们使用 HTML5 canvas 元素在图像上绘画。由此，让我们也允许用户在本地保存被操作的文件。清单 6-3 给出了一个例子。
清单 6-3 。 用画布文件 API 示例
<!DOCTYPE html>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
position: relative;
}
canvas {
position: absolute;
top: 20px;
left: 0px;
width: 300px;
height: 250px;
border: 1px solid #000;
}
.percent {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
button {
position: absolute;
top: 300px;
width: 200px;
height: 50px;
visibility: hidden;
}
</style>
<head>
<meta charset=utf-8>
<body>
<div class="percent">Loader: 0%</div>
<canvas width=300 height=250>
<p>No Canvas Support</p>
</canvas>
<button></button>
<script>
function adInit(event) {
event.preventDefault();
var canvas = document.getElementsByTagName('canvas')[0],
context = canvas.getContext('2d'),
progress = document.querySelector('.percent'),
img = document.createElement("img"),
saveBtn = document.querySelector("button"),
mouseIsDown = false,
hasText = true,
clearCanvas = function () {
if (hasText) {
context.clearRect(0, 0, canvas.width, canvas.height);
hasText = false;
}
};
// GENERIC CTA
context.fillText("Drop an image onto the ad!", 50, 50);
// Image for loading
img.addEventListener("load", function () {
clearCanvas();
context.drawImage(img, 0, 0, 300, 250);
}, false);
// To enable drag and drop
canvas.addEventListener("dragover", function (evt) {
evt.preventDefault();
}, false);
canvas.addEventListener("drop", function (event) {
var files = event.dataTransfer.files;
if (files.length > 0) {
var file = files[0];
if (typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function (event) {
console.log(event.type);
};
reader.onprogress = function (event) {
console.log(event.type);
var percentLoaded = Math.round((event.loaded / event.total) * 100);
progress.textContent = "Loader: " + percentLoaded + '%';
console.log(percentLoaded)
};
reader.onloadend = function (event) {
console.log(event.type);
if (!file.type.match('image.*')) {
alert("Not an image!!");
} else {
img.src = event.target.result;
}
beginCanvasDrawing();
};
reader.onerror = function (event) {
console.log(event.type);
};
reader.readAsDataURL(file);
}
}
event.stopPropagation();
event.preventDefault();
}, false);
function beginCanvasDrawing() {
var brush = "rgba(200, 34, 2, .5)";
canvas.addEventListener("mousedown", function (event) {
mouseIsDown = true;
clearCanvas();
context.beginPath();//starts the drawing once users mouse is down
}, false);
canvas.addEventListener("mousemove", function (event) {
if (mouseIsDown) {
canvas.style.cursor = "pointer";
context.strokeStyle = brush;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 15;
context.shadowColor = brush;
context.lineWidth = 5;
context.lineJoin = "round";
context.lineTo(event.layerX, event.layerY);
context.stroke();
} else {
console.log("hold mouse button down")
}
}, false);
canvas.addEventListener("mouseup", function (event) {
mouseIsDown = false;
var colors = context.getImageData(event.layerX, event.layerY, 10, 10).data;
console.log(colors);
brush = "rgba(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ", " + colors[3] + ")";
console.log(brush);
}, false);
saveBtn.style.visibility = "visible";
saveBtn.innerHTML = "Save Your Creation";
saveBtn.addEventListener("click", function (event) {
var newImg = new Image();
newImg.src = canvas.toDataURL();
window.location.href = newImg.src.replace('image/png', 'image/octet-stream');
}, false);
}
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
从代码中可以看出，用户被要求将图像拖放到广告的 canvas 元素上，DND API 和 File API 将图像呈现到屏幕上。从那里，我们将调用一个方法 beginCanvasDrawing ，该方法将调用我们特定的画布绘制函数，允许用户在浏览器中插入图像后进行“绘制”。
在 beginCanvasDrawing 中，我们将检测用户是否在用鼠标绘图，并为用户提供一个按钮来保存新的图像组合。一旦用户选择了按钮，就会创建一个新图像，并且画布的新位图信息会应用到图像的源。在那里，通过将图像的文件类型替换为 image/octet-stream，图像被保存到他们的文件系统，这允许用户将图像信息保存为二进制文件。图 6-3 显示了浏览器应该呈现的内容。
图 6-3。带有文件和画布的图像文件上传示例
注意你可以检测浏览器是否支持文件写入器 API，并以这种方式在本地保存信息。否则，您可以使用服务器端代码来获取二进制信息，并以正确的文件名保存素材。
此外，HTML5 被设置为支持 ，而不是导航到 URL 。(参见html5-demos.appspot.com/static/a.download.html的例子。还有，看nihilogic.dk/labs/canvas2image；这是一个有用的轻量级库，可以从 canvas 元素中保存不同的图像类型。)
我自己仍然记得当 Flash Player 10 让广告开发人员获得文件访问权来创建用户生成的内容(经过用户许可)时，我是多么兴奋。现在，在浏览器中，我们可以做同样的事情——获取本地文件，从用户的机器上访问视频或音频。如果你问我，我会说这些都是非常令人惊奇的东西！
注意记住，这个 API 实际上并不是 HTML5 规范的一部分，它处于工作草案状态。因此，随着规范工作的继续，功能可能会有所改变。参见www.w3.org/TR/FileAPI获取更多关于文件 API 的信息。
页面可见性
页面可见性 API 是我期待已久的东西！我非常渴望开始利用这个特性，因为它为最终用户和开发人员提供了巨大的性能优势。页面可见性 API 允许浏览器根据页面的可见性来处理或“切换”内容和系统资源。简而言之，如果你没有在看什么东西，比如说，如果它在另一个标签上，浏览器将停止为该内容分配资源，为用户当前正在查看的内容释放更多的系统资源。让我们看看如何在一个广告例子中使用页面可见性 API(参见清单 6-4 )。
清单 6-4 。 页面可见性 API 示例
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<body>
</body>
<script>
var isHidden,
state,
visibilityChangeEvent;
function adInit(event) {
console.log(event.type)
if (typeof document.hidden !== "undefined") {
isHidden = "hidden";
visibilityChangeEvent = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
isHidden = "mozHidden";
visibilityChangeEvent = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
isHidden = "msHidden";
visibilityChangeEvent = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
isHidden = "webkitHidden";
visibilityChangeEvent = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
document.addEventListener(visibilityChangeEvent, function (event) {
if (document[state] == "hidden") {
pauseAd();
} else {
startAd();
}
}, false);
}
function pauseAd () {
console.log("pauseAd");
//code to pause ad animation or video
}
function startAd () {
console.log("startAd");
//code to resume ad animation or video
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</html>
如代码所示，您可以监听文档可见性的状态变化，并触发 pauseAd 或 startAd 方法，这将分别暂停或开始广告的动画或视频播放，如果创意利用这些功能的话。
广告中的页面可视性
我想你会同意，在广告领域，这可能是为用户提供最佳体验的巨大优势。我们可以暂停动画、视频播放，甚至是隐藏的浏览器标签上的外部请求。我甚至可以说，这应该是未来数字广告 的绝对标准(因为浏览器采用了这一功能)。
为了获得更大的粒度，JQuery 还有一个插件来检测元素在页面上的可见性。当计算真实可见广告印象与提供的广告印象时，或者甚至当消除用户当前没有查看的页面上的广告单元的资源时，该插件可能更加有益。想一想——为什么要在没人看的时候初始化创意内容？“如果一个广告出现在页面上，但没有人浏览，它还能算作一个印象吗？”传统上是这样的，但是随着类似措施的实现，这种情况不会持续太久——这将给广告商带来更好的广告回报。
注意要检测元素可见性，看看
inview 插件github.com/protonet/jquery.inview。
在撰写本文时，该规范仍处于工作草案状态，因此对页面可见性 API 的支持非常少。在我写这篇文章时，它只在 Chrome 13+，Firefox 10+和 Internet Explorer 10+中受支持。随着供应商市场的采用和用户群的增长，我希望看到更广泛的实现，甚至可能出现围绕这一点的 IAB 标准。当前工作草案见dvcs . w3 . org/Hg/web perf/raw-file/tip/specs/page visibility/overview . html。
历史
现在我们来讨论一下历史 API。每个互联网浏览器都有它，几乎每个互联网用户都经常点击浏览器的后退按钮，以便回到浏览器的时间。它无疑是浏览器整体界面中最受欢迎的按钮。history API 提供了一种在用户的浏览器历史中添加和删除记录的方法，在这种方法中，可以保留恢复页面状态的数据并更新 URL，而无需刷新页面内容。这种方法与选择 Back 按钮有很大不同，因为这样做时，页面总是会重新加载，实际上导致浏览器重新呈现内容，向服务器发出请求，并再次触发任何广告展示。
history API 有一堆有用的特性，在你的下一次广告活动中使用它也会很有趣。例如，您可以构建一个创意，假装知道用户最后访问了哪里。是的，有点令人毛骨悚然；这可能会吓到一些用户，甚至引起一些反弹，但它确实是无害的，因为您不会收集任何个人身份信息。您只需调用浏览器存储内存中的历史记录。
对于广告开发人员来说，这个 API 有点棘手。假设用户正在浏览广告内容，可能在动态产品提要中搜索不同的产品，开发人员将每个用户交互记录到浏览器的历史记录中。现在，如果用户使用浏览器的后退按钮，它将返回到之前在广告内容中查看的状态，而不是返回到之前的页面内容。虽然这都是非常新的和新兴的，我们将不得不看看数字广告适合在它的历史 API 的使用；它可能会与许多事情发生冲突，甚至可能是数字广告的禁区。无论事情如何发展，历史 API 都值得熟悉；我甚至看到一些有趣的例子，复制了滚动文本的老套字幕，但是在这种情况下，是在 URL 栏中。
有趣的是，出版商和内容制作者将如何在他们的页面中实现历史 API。例如，当使用 API 并调整用户的浏览器状态时，如果没有页面重新加载，屏幕上的广告内容不会重新加载；因此，没有印象会火。然而，有人再次看到了内容，甚至可能是一个全新的人，这应该会产生新的印象，对吗？
有关历史 API 的更多信息，请访问dev . Opera . com/articles/view/introducing-the-html 5-History-API/查看 Opera 的开发频道
网络存储
在任何应用中，保存数据都是一项非常普通的任务，而在 HTML5 中，它在 Web 上变得更加重要。有时，您会希望存储数据以供以后参考；其他时候，您可以使用 HTML5 历史 API 保存的关于用户浏览历史的数据。你甚至可以保存数据供离线查看，你将在第十章中了解到。无论从哪个角度来看，存储都是软件开发中的一个重要特性，所以让我们来看看在 HTML5 中使用 web 存储 API 的情况。
你需要记住两种类型的网络存储。
- localStorage:保存没有截止日期的数据
- sessionStorage:保存一个浏览会话的数据
在浏览器重启后， localStorage 中的数据仍然存在，而 sessionStorage 仅在页面刷新时才存在。该规范是用于浏览器中数据的名称/值对的数据存储的 API。这是非常革命性的，因为您不必通过服务器请求来请求保存的信息；一切都保存在客户端。现代浏览器通常允许高达 5 兆字节的客户端存储，而在 HTML4 中，cookie 用于存储关于用户会话的少量信息，高达 4 千字节的存储，并且它随每个 HTTP 请求一起传输。现在，你可以通过 Base64 编码将图像保存到一串文本中，并将其保存在浏览器每个域 5 兆字节的存储空间内(大约)。另一个很好的特性是，如果你试图超过浏览器设置的默认存储量，浏览器会要求用户允许或拒绝存储更多的信息。
本地存储
现在，sessionStorage 是一种在本地存储客户端数据(名称/值对)的方法——很像 cookies，但它有更多的优点。通过 sessionStorage，您现在可以将用户浏览会话的数据保存在内存中，以便以后在广告体验中检索，而无需多次往返服务器。使用 sessionStorage 的真正优势在于它支持所有主流浏览器，甚至低至 IE8！同样，它的操作类似于 cookies，但与 cookies 不同，web 存储数据不会随每个服务器请求一起发送，并且没有 cookies 的 4kb 数据存储大小限制。存储的数据是受域限制的；这意味着浏览器的会话存储对象信息仅对最初放置该数据的域是可读的。
注意如果用户在同一个站点打开了多个窗口，每个窗口都有自己的 sessionStorage 对象。
本地存储
由于我是 Mac 用户，所以疯狂使用 Command+Tab；对于 Windows 用户，应该是 Ctrl+Tab。它提供了一种在我的机器上的多个窗口/应用之间切换的简单方法，如果你像我一样，你很可能会几次误按 Command+Q 或 Ctrl+Q 退出应用。(当你在网上填写一个大表格时，没有什么比手指滑动并选择 Q 而不是 Tab 更令人沮丧的了！
现在有了 localStorage ，开发人员可以通过保存用户在表单文本字段中输入的内容来帮助用户。在这种情况下，如果我退出(我经常不经意地这样做)，我可以在重启浏览器后回到网站，从离开的地方继续。这对用户体验非常有益。这背后的驱动技术是 localStorage，它允许开发人员保存浏览器的持久数据，这样，如果用户关闭并重新打开浏览器，数据将会保留，开发人员可以在以后检索数据。
如上所述，保存 localStorage 时没有应用浏览器到期日期。也就是说，它永远存在，除非开发人员清除或修改它，或者用户完全删除浏览器应用或清除所有浏览器内存。
无论您使用 sessionStorage 还是 localStorage，存储和检索值的语法都是相同的——如下例所示，其中存储了用户名。
localStorage.setItem("userName", "John");
或者
sessionStorage.setItem("userName", "John");
让我们看看在 ad 单元中使用 localStorage。在清单 6-5 中，用户被提示输入他或她的名字；然后，name 值进入 localStorage 对象，该对象允许广告在广告文本中使用该名称，即使用户稍后在另一个发布者站点上看到该广告。
**清单 6-5 。local storage API 示例
<!DOCTYPE HTML>
<html>
<head>
</head>
<style>
* {
margin: 0px;
padding: 0px;
position: relative;
font-family: Verdana;
}
#ad {
position: relative;
top: 0px;
left: 0px;
width: 300px;
height: 250px;
border: 1px solid black;
text-align: center;
}
#name {
font-size: 60px;
z-index: 20;
color: white;
}
#usersName {
font-size: 50px;
z-index: 20;
font-weight: bold;
}
#cta {
z-index: 10;
-moz-box-shadow: 0px 0px 0px 0px #caefab;
-webkit-box-shadow: 0px 0px 0px 0px #caefab;
box-shadow: 0px 0px 0px 0px #caefab;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
background-color:#77d42a;
-moz-border-radius:42px;
-webkit-border-radius:42px;
border-radius:42px;
border:3px solid #268a16;
display:inline-block;
color:#306108;
font-family:arial;
font-size:28px;
font-weight:bold;
padding:20px;
text-decoration:none;
text-shadow:1px 1px 0px #aade7c;
}
#cta:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
background-color:#5cb811;
}
#cta:active {
position:relative;
top:1px;
}
#background {
z-index: 0;
width: 300px;
height: 250px;
position: absolute;
top: 0px;
left: 0px;
background: rgb(201,222,150); /* Old browsers */
background: -moz-linear-gradient(top, rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-stop(100%,rgba(57,130,53,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* W3C */
}
</style>
<body>
<div id='ad'>
<div id='name'>Hello!<span id='usersName'></span></div>
<a id='cta'>Click Here</a>
<div id='background'></div>
</div>
</body>
</html>
<script>
function adInit () {
if(localStorage) {
if (localStorage.getItem('userName') === '' || localStorage.getItem('userName') === null) {
var uname = prompt('Enter Your Name');
localStorage.setItem('userName', uname);
document.getElementById('usersName').innerHTML = uname;
} else {
document.getElementById('usersName').innerHTML = '<br>' + localStorage.getItem('userName');
}
} else {
alert('Browser not supported!');
}
}
window.addEventListener('load', adInit, false);
</script>
让我们回顾一下代码，并在您最喜欢的文本编辑器中随意跟随。通过为要加载的文档添加一个事件监听器，并附加一个名为 adInit 的处理函数来启动。该函数首先检测浏览器是否支持 localStorage。如果是，该函数将继续检测是否为名为 username 的项输入了值。如果没有，则提示用户输入他或她的名字并将其呈现到广告单元中。现在，如果用户刷新页面，在另一个网站上查看广告，甚至关闭浏览器，该名称将再次显示在广告单元中，直到数据被清除或修改。
通过刷新浏览器，你应该会看到类似于图 6-4 中的图片的东西。
图 6-4。带有用户名的 localStorage 广告示例
如果你看到与图中相似的东西，干得好！如果没有，重新检查代码并再试一次。现代网络浏览器甚至有工具来帮助你。通过使用 web 检查器并转到 Resources 选项卡，您可以查看浏览器保存的所有存储项目。图 6-5 显示了使用谷歌的 Chrome 浏览器时的样子。(在第十章的中会有更多关于数据存储和测量的内容。)
图 6-5。谷歌 Chrome 浏览器上的 localStorage web inspector 视图
注意使用 web inspector，还可以查看本地数据库、web 存储项目、cookies 和 HTML5 应用缓存条目。
用户隐私
与数据存储相关的隐私问题一直是数字广告相关各方讨论的重要话题。目前，许多初创公司试图利用设备和用户“指纹识别”方法；它通过各种形式的网络存储在用户的机器上存储唯一的、可跟踪的 id，用于跨网站、广告网络或两者的测量。诉讼还涉及 Bluecava 和 Ringleader 这样的公司，因为他们复杂的用户检测技术，利用 HTML5 存储和数据库来锁定和跟踪未知用户。开发人员甚至开发了被称为“僵尸 Cookie”的技术，这种技术可以在几乎所有情况下持续存在，因为它在各个领域存储值，包括 web 存储、Cookie 和数据库。
最后，HTML5 存储很有前途，但隐私有点令人担忧。如果你需要支持早期的浏览器，你可以利用网上一些很棒的 polyfills 在商店试试这些:github.com/marcuswestin/store.js和github.com/jensarps/IDBWrapper。你可以在 dev.w3.org/html5/webst… 的了解更多关于网络存储 API 的信息，在 http://dev.w3.org/html5/webstorage#privacy 的了解更多关于第三方广告网络中用户隐私的信息。
网络工作者
你很可能在浏览网页时看到过浏览器通知(见图 6-6 )。
图 6-6。“浏览器无响应”屏幕
我使用 Chrome，但其他浏览器有类似的消息向您(作为用户)显示页面内容变得没有响应，并要求您停止并清除代码执行。无论信息是什么，你都会觉得浏览器让你失望了。不要烦恼；谷歌的 Web 工作器 团队在新浏览器中推出了一个惊人的新功能。
当执行密集型脚本时，浏览器可能会变得无响应，直到页面上的代码(或广告)最终执行完毕。在某些情况下，这可能需要一段时间，最坏的情况是，它永远不会停止执行。这可能会将用户锁定在用户界面 (UI)元素之外，暂停动画，停止视频播放，或者最糟糕的是，使浏览器崩溃。
这里发生的事情是，浏览器试图完成解释和运行有问题的脚本，它将利用所有可用的系统资源来这样做。为了在新的现代浏览器市场中解决这个问题，可以使用网络工作者。
本质上，web worker 是由浏览器在后台解释的 JavaScript，独立于其他脚本和 DOM，最终不会影响整体性能。这真的很牛逼；你可以继续在广告创意的用户界面中做任何你想做的事情:点击、轻击、悬停、滚动——你明白了——所有这些都是在工作脚本并行运行的同时“帮助”其他脚本和内容中的功能。Web 工作者使用 JavaScript 提供了一个非常需要的多线程方法来进行创造性开发，如图 6-7 所示。
图 6-7。典型网络工作者工作流程演示
希望在看完图 6-7 后，你会同意委派另一个工人来做你的工作比你自己承担所有工作更有效率。这是网络工作者努力要实现的目标。他们将繁重的 JavaScript 执行任务分解成多个工作线程。
在 Web 工作器 出现之前，开发人员需要变得狡猾，将他们的代码分解开来，这样浏览器就可以一次解释更小的“代码块”。这相当于在单线程浏览器世界中使用劣质的多线程方法。显然，这从来没有真正工作得太好，因为它要求脚本严重依赖于计时器和间隔，所有这些都大大降低了体验，这取决于用户的机器资源 。对于用户来说，它也经常产生不希望的“突突”或交错加载的效果。
最初是 Google 在 Gears 项目 中提出的一个概念，Web 工作器 最终从其他浏览器供应商和 W3C 那里获得了足够的认可，从而产生了自己的规范。通过将物理或数学负载到一个单独的线程上，它可以真正地加快搜索输入、数学计算甚至复杂动画的文本过滤。有人说粒子发生器吗？
Web 工作器 是模块化项目代码的好方法，也很有创意。如果您有 UI 代码，允许它成为标记的一部分，并独立于 worker 脚本加载它，worker 脚本可以处理随机数生成器或其他与 UI 不直接相关的东西。
注意网络工作者需要被托管在本地或远程服务器上才能工作。
广告业的网络工作者
在广告业，网络工作者可以极大地提升用户体验。我们终于有了一个独立于页面上的任何东西在后台运行 JavaScript 的 API，这将允许长时间运行的任务被完成，而不会使页面无响应。如果你用 JavaScript 做任何种类的计算或复杂的算法，你绝对应该选择使用 web worker，如果它们在你的目标浏览器中可用的话。最终用户将获得更好、更快的体验。让我们来看看如何使用一个简单的 worker，它从浏览器中的 Navigator 对象 返回用户的信息(参见清单 6-6 )。
清单 6-6 。 网络工作者广告示例 (主脚本)
<!DOCTYPE HTML>
<head>
<script>
if (!!window.Worker) {
var worker = new Worker('worker.js');
// Receive the message from the worker thread
worker.onmessage = function (event) {
var workerMsg = event.data;
document.write(workerMsg);
};
} else {
console.log('No Worker Support')
}
</script>
</head>
<body>
</body>
</html>
//Code in worker.js file
for (property in navigator) {
postMessage("<b>" + property+"</b>: "+navigator[property]+"<br>");
}
从我们的例子中可以看到，我们不是通过编写来设置 worker.js 脚本文件，而是通过编写 var worker = new worker('worker.js ')来创建一个新的 Worker 对象，并将脚本文件的位置传递给它；。
接下来，worker 脚本将运行其 for 循环，该循环将通过 postMessage 调用返回用户的 Navigator 对象的所有属性。回到主脚本，我们通过编写 worker.onmessage 来处理 postMessage 调用；通过该事件，我们调用一个新变量 workerMsg，并将其设置为 event.data。
最后，我们只是将结果输出到 DOM 供您查看，但实际上，这些信息可以用于更具体地绑定到广告服务器的其他目的，例如检测用户的用户代理、平台、应用名称和版本号。
有很多方法可以利用一个工人。也许你想做一些复杂的数学或重复的动画功能；无论哪种方式，请记住，性能最终决定一切，在广告中，以及在一般的网络上，提供快速的体验大有帮助。
注意 Web 工作器 不能访问以下 JavaScript 对象:DOM、窗口、文档和父对象。
克-奥二氏分级量表
你介绍过两个不同人群的人互相认识吗？比起让他们在没有你的情况下第一次聊天，你通常会促进介绍和对话，以确保双方彼此感到舒适。同样的原则也适用于网络上的资源共享。跨来源资源共享(CORS) 定义了当使用普通 HTTP 请求访问来自不同来源的资源时，浏览器(客户端)和服务器(主机)可以并且应该如何相互通信。
CORS 允许浏览器和服务器了解彼此的足够信息，以确定请求或响应是否应该发生。这意味着需要在服务器或主机级别以及客户端级别进行一些配置。CORS 是一种规范，它允许跨域请求的开放访问资源共享，而不受“同域”策略的限制，该策略授权运行在来自同一站点的页面上的脚本访问彼此的方法和属性。
让我们面对现实吧，我们经常需要从一个资源请求数据，而这个资源与我们请求的资源没有相同的域。对于这一点，有一些变通办法，比如使用 JSON-P 或定制代理服务，但是这需要更多的操作时间来开发——此外，在您需要的时候请求您需要的东西，并且知道来源可以被客户端信任并且您被允许这样做，这不是很好吗？回到上面的例子，因为我们的两个朋友相遇了，他们应该感到足够舒服，可以在将来互相拜访。
注意在
json-p.org有更多关于 JSON-P 的信息。
广告界的 CORS
假设 DoubleClick 上的一个广告想要访问网站www.nytimes.com上的一些信息。这种类型的整合发行商运营通常是一种路障广告体验，需要创意机构、发行商和广告服务器花费大量时间来开发和完成。由于发布者和广告服务器位于不同的域中，在浏览器的同源策略下，传统上不允许两者之间的任何脚本或对脚本的访问，如前所述。
然而，通过在服务器和客户端支持 CORS，www.nytimes.com域可以添加一些特殊的响应头，允许双击分别访问网站的数据。这可能意味着由第三方广告服务器 DoubleClick 提供的广告可以依赖于由纽约时报托管的脚本，甚至可以解析来自其网站的数据——本质上，成为所有未来数据传输的“白名单”,或者只是在活动期间。回想一下我们在第四章中的画布例子，在那里我们不能引用外部域的图像。现在有了 CORS，我们可以了！在启用 CORS 的情况下，我们可以干净地从外部域提取图像，而不会在浏览器中出现任何错误。当广告服务器成为“白名单”时，这变得非常有趣，某些数据提供商和出版商允许他们从各种可信来源获取信息。让我们看看清单 6-7 中的，我们使用 CORS 从一个域请求数据，以显示响应信息。
清单 6-7 。 CORS API 示例
<!DOCTYPE HTML>
<head>
<script>
var call = new XMLHttpRequest();
var url = 'http://free.worldweatheronline.com/feed/weather.ashx?q=19043&format=json&num_of_days=3&key=XXXXXXXXXXXXXX';
function callOtherDomain() {
if(call) {
call.open('GET', url, true);
call.withCredentials = true;
call.onreadystatechange = gotThatData;
call.send();
}
}
function gotThatData (data) {
console.log(data)
}
callOtherDomain()
</script>
</head>
<body>
</body>
</html>
从清单中，您可以看到我们通过编写 var call = new XMLHttpRequest()来使用 XMLHttpRequest object XMLHttpRequest 对象；。从那里，我们设置另一个变量，url，它将指向免费天气服务，我们试图在那里访问信息。接下来，我们设置一个函数 callOtherDomain()，它将处理对域的请求并提供对函数 gotThatData()的回调，在这里我们只需注销响应(如果有)。
如果你在你的浏览器中跟踪并发出那个请求，首先，你需要你的免费 API 键来请求www.worldweatheronline.com，但是之后，你应该会在浏览器的控制台中看到一些非常有趣的东西——就像你在图 6-8 中看到的一样。
图 6-8。失败的 CORS 请求的演示
这条消息基本上是在告诉你，天气服务的域名还没有建立，CORS 使用的是我的本地主机域名。如果不是这样，您将能够在我们的浏览器中看到响应数据。
为了利用 API，广告需要从其他域获取信息，这意味着服务器的响应头需要包含一些基本的访问，通过 Access-Control-Allow-Origin: *(公共)或 Access-Control-Allow-Origin:example.com(受保护)。在第一个例子中，它是一个通配符，因此允许任何域访问信息。在后一种情况下，URL 将与您请求广告内容的域相匹配。如果该域与访问控制头不匹配，对广告的响应将失败。
另一个有趣的问题涉及用户的个人和私人数据。在任何形式的广告中，这都是一个重要的话题，尤其是在域之间共享数据时，因此请务必与发布者和数据提供商核实，以确保他们的服务条款(TOS )符合您打算在广告中使用的功能。有很多网络服务你可以“技术上”使用，但是你最不想担心的就是诉讼！
此外，当您与发布者合作进行这些丰富的集成时，一定要获得一个测试页面，但要确保测试页面与活动页面托管在同一个域中，并尽可能地代表发布当天的体验。如果您要在广告服务器、发布者和数据提供商的域之间发布和请求数据，它们都需要 CORS 访问权限才能做到这一点。我见过许多活动被“列入白名单”到一个沙盒或测试帐户，只是为了让它上线后就破产，因为内容托管在不同的域上。
最后，请记住，正如 cani use(caniuse.com/#feat=cors)所概述的，CORS 还处于工作草案规范中，但它很快显示出在所有主流浏览器中的采用。在 www.w3.org/TR/cors 有更多关于 CORS 规格的信息。同时，请访问enable-cors.org，深入了解如何在您的服务器上启用 CORS。
微观数据
万一你想进一步扩展 HTML5，microdata API 为你的 HTML 标记增加了一个补充的语义层。有了这些添加的信息，搜索引擎、浏览器和机器阅读器可以挖掘标记中的所有元数据，并最终为不同的设备提供更丰富、适应性更强的体验，包括那些可以帮助有特殊需求的个人的设备(如果开发人员提供了这些信息)。微数据在标记属性中使用简单的名称/值对来定义项目。在动态广告或素材标记中，从语义上了解一个值最后更新的时间，甚至只是跟踪创意的变化，这真的很有帮助。在下面的例子中，使用 itemprop=date，您可以将时间戳直接添加到广告的标记中，并在以后解析或过滤特定的信息。让我们来看看一些样本标记(见清单 6-8 )可能包含在销售饮料产品的动态零售广告中。
清单 6-8 。 微数据示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<body>
<span itemprop=products>
<span itemprop=name><a itemprop=url
href="http://www.retailer.com/soda">Soda</a></span>
<time itemprop=date datetime="2012-06-04">Last Updated</time><span itemprop=name><a itemprop=url
href="http://www.retailer.com/juice">Juice</a></span>
<time itemprop=date datetime="2012-06-14">Last Updated</time><span itemprop=name><a itemprop=url
href="http://www.retailer.com/milk">Milk</a></span>
<time itemprop=date datetime="2012-06-05">Last Updated</time><span itemprop=name><a itemprop=url
href="http://www.retailer.com/beer">Beer</a></span>
<time itemprop=date datetime="2012-06-10">Last Updated</time>
</span>
</body>
</html>
现在，您可以解析标记中的所有 itemprop=products 节点，同时引用 itemprop=date 和 datetime 属性。如果您在任何地方看到与当前日期不同的日期产品，您就知道该产品没有更新。这也是可访问富互联网应用(ARIA)的良好实践；尽管它不是(至少到 2012 年底还不是)网络广告的标准，但它仍然是网络内容开发的绝佳实践。有关微数据 API 或 ARIA 的更多信息，请参见www.w3.org/TR/microdat…和www.w3.org/TR/wai-aria。
摘要
在这一章中，我们仅仅触及了这些有用而强大的 API 的皮毛。为了找到更多信息并深入了解每一种方法，请深入研究代码并尝试各种可能的方法。所有这些 API 和即将出现的类似技术都可以归类为现代网络，它们将影响未来广告的创作方式。
这一章涵盖了很多 API，老实说，如果我要列出所有其他与 HTML5 密切相关的 API，单单这一章就可能是一本非常大的书。只知道浏览器发展很快，市场竞争巨大。这些新兴特性从 W3C 和 WHATWG 中获得标准还需要一段时间，这些委员会通常很难跟上！也就是说，尽可能多地收藏有用的信息，并使用像 html5please.com 这样的在线工具来缓解你的开发困境。
在本章结束时，你应该知道还有一个 API 我们还没有讨论，一个如此庞大和开创性的 API，它有理由有自己的一章。媒体 API 就是那个 API，它是真正的 HTML5 规范的很大一部分。仅这个 API 就引起了许多争论，所谓的 Flash 与 HTML5 之战，以及过去几年网络上的整体混乱。下一章将关注 HTML5 中最流行的特性:浏览器中的本地音频和视频支持。
七、HTML5 媒体
在本章中，您将学习如何使用新的 HTML5 video 元素在跨浏览器的广告中部署视频。我还将介绍当浏览器不能识别新的视频元素时对插件的故障转移支持。在处理视频时，有许多事情需要注意，包括浏览器支持、转码、压缩、交付等等。本章不会让你成为专家，但它会给你一个自学的平台，这样你就可以在处理视频和网络标准时做出更明智的决定。
过去，Flash 被用于独立于操作系统的漂亮的跨浏览器视频体验。无论您是向支持 QuickTime 的 Mac 用户部署视频，还是向支持 Windows Media Player 的 Windows 用户部署视频，Flash 都是一个无处不在的选项，只需部署一次视频，就可以通过一种普遍接受的格式(FLV)将视频发送给每个人。因为 Flash 播放器在所有的桌面屏幕上无处不在，这就创造了一个可以在整个生态系统中完美运行的视频解决方案。然而，随着新兴的手机和平板电脑市场，营销人员和创意开发人员现在面临着使用 HTML5 的新视频元素构建“仅浏览器”解决方案。有了 HTML5 ，视频现在是浏览器架构的一流成员。这意味着视频现在是 HTML 规范的一部分，就像段落和 div 一样。
在我从事开发工作之前，我大量参与了视频制作和后期制作，所以我知道内容创作者为了实现高质量的作品所付出的努力。处理在线视频所需的格式、编解码器 和数学知识可能会让人精疲力尽，因此我将介绍浏览器可以解码的格式，并在此过程中提供有用的提示。如果您对哪些视频格式适用于哪些浏览器、什么是编解码器以及如何使用它们来获得最佳质量，或者如何准确遵循出版商和设备规范感到困惑，本章将通过关注行业术语来快速理解这一切。本章将详细解释如何为 HTML5 浏览器和设备开发、设计和优化数字媒体内容。我们开始吧！
HTML5 视频
在这一节中，我将讨论 HTML5 中用于控制和处理视频回放的新 API，这无疑是新规范最大的增强之一。HTML5 视频 API 引发了一场大规模的“Flash 已死”的辩论，在网络和广告行业引发了许多混乱和困惑。正如您所了解的，Flash(尤其是视频，具有丰富的功能集和无处不在的播放器，如 GPU 加速视频播放、自适应比特率流和针对内容创作者的数字版权管理保护)长期以来一直是网络广告之王。然而，随着 HTML5 现在允许原生视频支持，你还需要依赖 Flash 吗？
当 HTML5 视频在 2007/2008 年随着苹果 iPhone 和后来的 iPad 的推出而爆发时，出版商和内容所有者惊慌失措地想出如何在新设备上提供和访问他们的视频内容；目前，如果你想让人们看到你的视频内容，你需要考虑 HTML5 视频以及 Flash。当你的目标用户是使用旧操作系统和浏览器(比如 IE8)以及移动和平板设备的用户时，这一点尤为重要。
你很可能知道在你的下一次数字营销活动中有一个视频是非常重要的。当前的数字视频市场规模巨大，2012 年约为 40 多亿美元，而且近期没有放缓的迹象。但是，在这个新的现代网络中，如何跨屏幕、设备和浏览器提供视频内容呢？HTML5 视频对于任何内容制作者、发布者和设计者来说都是一个大新闻，因为通过在 HTML 标记中实现一个简单的视频标签，您现在可以非常轻松地创建一个视频播放控制器。在我展示其简单性之前，我将与您一起回顾一下它是如何使用 Flash 实现的。清单 7-1 展示了一个使用这种方法的样本视频。
清单 7-1。 Flash 视频播放举例
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="360" id="VideoTest" align="middle">
<param name="movie" value=" VideoTest.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>−−>
<object type="application/x-shockwave-flash" data="VideoTest.swf" width="640" height="360">
<param name="movie" value="VideoTest.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/img/get_flash_player.gif"
alt="Get Adobe Flash player" /></a>
<!--[if !IE]>−−>
</object>
<!--<![endif]-->
</object>
</div>
我想你会同意，仅仅在屏幕上显示一个视频就需要很多代码！现在，要在广告创意中实现 HTML5 视频元素，只需通过编写以下代码在 DOM 中创建视频元素:
<video></video>
接下来，您将需要包括一些属性来为您的特定用例定制视频体验。在下面的例子中，我包含了一个源、一个高度属性和一个宽度属性:
<video src='yourVideoFile.mp4' height='640' width='360'></video>
通过编写这些内容，我已经指示浏览器呈现一个 HTML5 视频元素，以 640x360 的尺寸播放文件 yourVideoFile.mp4。如果您想要包含视频控件，只需通过编写以下代码添加另一个属性:
<video controls src='yourVideoFile.mp4' height='640' width='360'></video>
浏览器现在将呈现玩家的控件。否则，您可以隐藏控件并创建自己的控件。可以通过使用 CSS 样式化控件元素和使用 JavaScript 处理视频行为来实现这一点。显然，这种方法比基于 Flash 的例子更加简单。
让我们首先看看驱动 HTML5 视频的标记，并解构其语法，然后我将进入开发的本质。考虑一下清单 7-2 中的代码。
清单 7-2。 HTML5 视频回放示例
<html>
<head></head>
<body>
<video>
<source src="sample.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src=" sample.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
</body>
</html>
前面的代码使用新的 HTML5 视频标记和必要的源标记，这允许浏览器调用支持的视频文件。理想情况下，每个浏览器都可以处理一种支持的文件格式。如果是这种情况，让视频源内联 也可以，如下例所示:
<video src="sample.mp4"></video>
确保托管和传送文件的服务器设置了正确的 MIME 类型，以传送每个视频文件的文件格式，这一点很重要。另外，一定要指定 type 属性，这样用户的浏览器就不会下载它不能播放的文件。本质上，用 MIME 类型和编解码器 来指定类型允许浏览器有效地选择它需要的文件。
所以，你可能会问，“如果我的广告活动需要达到尽可能广泛的受众，会发生什么？包括对老 IE 版本的支持？”简单来说，你真的有两个选择:要么使用谷歌的 Chrome 框架，要么进行快速故障回复。
谷歌的 Chrome frame 在 IE 浏览器中注入了一个 Webkit 渲染引擎，让你能够在较老的 IE 环境中渲染 HTML5 内容。或者，使用快速回切将允许您的用户首先获得 HTML5 视频，如果不支持视频标签，将通过 SWF 文件的对象标签使用之前的方法。
HTML5 视频对浏览器来说是一个很大的进步。视频元素支持一系列特性和属性，并且在当前浏览器市场中的支持几乎是稳定的。然而，与所有新兴事物一样，它可能会有一些不一致之处，并且它不会因为其碎片化而停留在视频元素本身。跨浏览器、屏幕和设备的支持需要大量的源视频文件来实际回放 HTML5 视频标签中的视频资源。正如您可能已经猜到的，创建、调整大小、转码和托管所有不同的素材版本需要一些时间和金钱，如果您正在谈论多点流，您甚至需要创建更多的内容(稍后将详细讨论这些主题)。一个值得访问的链接是caniuse.com/video，它可以更好地帮助你开发跨浏览器的视频。
内容创建
创意机构专门为各种屏幕拍摄视频。你再也看不到在线广告单元中重新定位的广播电视广告。他们通常会设置路障，用完整的互动视频和声音占据用户屏幕的很大一部分。其他人专门为桌面制作场景，并在不同屏幕上无缝工作的环境中拍摄他们的演员。在任何情况下，数字广告都是关于创造性地产生影响，大多数有影响力的广告都有视频。既然您已经了解了构建 HTML5 视频元素的内容，那么真正精彩的部分就在您将视频元素与 canvas、SVG 和 CSS3 等其他新兴 web 技术集成在一起的时候。记住这一点，你就可以在下一次在线活动中创造出一些令人惊讶的丰富功能和图形。然而，在你走上这条路之前，有一些东西你想用在视频元素上，也有一些你想避免的。让我们看看每一个，从你应该使用的东西开始。
你应该用什么
海报图像是静态图像(或动画 GIF)，在视频回放开始之前最初可以看到。我认为这是你的 CTA 信息，吸引用户点击并播放你的视频内容。海报图像不是必需的属性，但是就广告而言，你应该使用它，这样如果你的用户从未点击你的视频，他们仍然会得到一个静态的(或动画)图像或信息。
接下来是控制；控件包括播放/暂停控件、静音/取消静音、搓擦条、当前时间指示器(CTI)以及浏览器本身与视频标签一起使用的全屏图标。给视频添加控制很简单，如下所示:
<video src="sample.mp4" controls></video>
如果您将视频用于动画以外的任何目的，您应该确保您的控件已打开。如果你不喜欢浏览器使用的原生控件，也不用担心；你可以通过 CSS 来设置它们的外观，并通过 JavaScript 添加它们的功能来控制视频。但是，如果您选择对控件使用 CSS 和 JavaScript，请确保删除 video 标签中的 controls 属性。因为视频现在是一等公民，也是 DOM 的一部分，所以您还可以使用最新的 CSS3 属性(如反射、遮罩、渐变、变换、过渡和动画)来设置它的样式(假设您的浏览器支持它们)。你甚至可以在视频元素上使用 SVG 和 SMIL 制作动画。也许您想在视频在屏幕上移动时使用 SVG 滤镜模糊视频，或者让视频元素像栅栏上的大门一样打开。有很多技巧和窍门可以让你的视频在下一次活动中表现得更好、更独特。
你不该用的东西
当你在下一个战役中使用视频的时候，你几乎不应该使用循环属性 ，它会一遍又一遍的播放你的视频。这将创造一个糟糕的用户体验，并让出版商或广告服务公司在活动开始前就将其标记出来。
其次是对自动播放的使用和依赖。自动播放是横幅内强制视频的一个很好的功能，就像动画一样，但一些利用蜂窝网络或数据计划的移动设备，如苹果 iPad 和 iPhone，限制自动播放属性的工作，以保护客户的数据计划不超过他们甚至没有选择观看的内容的限制。如果你确实在桌面广告中使用自动播放视频，确保默认关闭音频。没有人想去一个网站阅读或观看内容，并以完整的声音播放广告。那对每个用户来说都是很差的体验！
另一件要注意的事情是删除视频中的小字体。如果你不这样做，你的视频副本(取决于浏览器的缩放级别)可能会看起来很差，并产生不必要的文本锯齿。
此外，如果你是动画的视频元素，尽一切努力保持视频播放器在一个完整的像素。这将再次消除视频播放器的任何不必要的混叠。
最后，密切关注更大数据速率视频的 CPU 和 GPU 负载。事实上，如果你在播放过程中注意到浏览器停滞不前，很可能是因为你正在播放的视频占用了太多的系统资源。我的建议是进一步优化你的视频(后面会有更多)。
最后，在创建在线视频内容时，你所使用的工具才是最重要的。请记住，HTML5 视频只是在没有插件的情况下在浏览器内播放视频内容的一种方式。如何创造创意内容完全取决于你和活动的要求。我建议使用以下一些工具。对于高端运动图形和在绿/蓝屏上拍摄的抠像镜头，我喜欢 Adobe 的 After Effects(adobe.com/products/aftereffects.html)。为了 3D 的需要，我使用 maxon.net/products/ci… 马辰的 4D 电影院。将两者结合使用可以制作出可以部署到任何屏幕上的精彩视频。使用 Adobe 的 Media Encoder(【adobe.com/products/me… 的 QuickTime Pro(Apple . com/us/product/d 3380 z/A/QuickTime-7-Pro-for-MAC-OS-x)等工具，为设计人员和开发人员提供强大的功能，包括设置压缩、大小、帧速率等，以便根据他们的喜好和出版商的要求调整他们的视频内容。
编码和代码转换
现在，您已经了解了视频资源的内容创建部分以及 HTML5 视频标签的基本构建块，您可以进入视频编码和转码的复杂世界了。简而言之，编码是用于视频的初始压缩技术，通常来自后期制作视频工作室，转码是将视频从一种格式转换为另一种格式。
编码
在网络广告如日中天的时代，获取原始的 MOV 或 AVI 文件并将其转码为适合在 SWF 中播放的 FLV 视频是非常常见的。对于初始编码任务 ，这通常是一种无损压缩，这意味着文件的核心保真度保留在输出文件中。当带宽限制不是问题时，这种无损技术或多或少用于传输文件，输出非常适合存档或回放最真实的源视频。
转码
另一方面，转码通常是一种有损压缩技术。当您生成通过 Web 回放的视频文件时，通常使用 Lossy，这通常是为了通过 HTTP 或 RTMP 协议进行传输。有损不会保持原始源视频文件的质量；它牺牲了一些整体视频质量，以获得更小的文件大小。非常好的压缩技术也可以用来以非常小的占用空间保持非常高质量的图片，我将在下面的部分中讨论其中的一些。
对视频进行编码和转码是大部分时间花在网络视频上的地方，你很快就会发现，网络视频的质量取决于用于转码的源文件。我们称之为“垃圾进，垃圾出”规则。基本上，你不能提高视频的质量和播放已经严重压缩或改变很差。视频压缩很像图像压缩；一旦文件中的数据丢失，它就永远消失了！用于网络交付的视频编码/代码转换既是一门艺术，也是一门科学。说真的，可以就其背后的技术、理论和实践写一整本书(许多人已经这样做了)。这一部分不是为了让你成为压缩专家，而是在你下一次 HTML5 活动中处理视频时给你一个高层次的策略。让我们来看看在处理视频时你可以调整的一些设置。
多通道的
多通道编码 ，也称为两通道甚至三通道，是一种使用多通道将视频编码和转码为另一种格式以保持最佳质量的技术。基本上，视频编码器/代码转换器在应用任何压缩之前首先检查视频:这是一次通过。接下来，从开始到结束，以及中间的每一帧，后续的视频传递发生两到三次，以在第一次传递给编码器一些如何进行压缩的指导之后应用压缩。在检查文件时，编码器创建关于源视频的信息，并将该信息写入日志文件；一旦写入该信息，编码器就可以查找该信息，并确定在用户为该过程设置的预定限制内调整视频质量的最佳方式。
多通道编码 仅用于可变比特率编码(VBRs)作业，因为恒定比特率(CBR)编码不为编码器提供任何“让步”来调节每帧的可用比特率。我喜欢把这个过程看作是“会说话的脑袋”视频和“动作序列”之间的区别。正在说话的头部视频通常很少移动，因此帧之间的比特率可以保持一致，并且通常一遍作业就足够了。随着场景中的帧因不同的颜色值、混合和/或严重的运动模糊而变得更加复杂，动作序列需要调整其可用的比特率。该序列通常需要两遍甚至三遍才能在指定的视频比特率内获得所需的质量和大小。这种多通道技术为某些视频可能存在的可变场景差异创造了更好的整体质量。
比特率
比特率通常是开发者在对网络视频进行转码时调整的那些预先确定的用户设置之一。比特率实际上是视频中存储的信息量，在大多数情况下，比特率越高，视频质量越清晰。当然，如果您将 FLV 等高度压缩的视频资源转码为未压缩的编解码器，这是不正确的。压缩算法会将更多的数据写入整个视频，而不会增加图像保真度，但这实际上是矫枉过正，因为图像信息在压缩作业之前就已经丢失了。这种做法将在已经受损的视频中为您提供明显更高的比特率。比特率在 HTML5 视频的交付中发挥着巨大的作用，我稍后将讨论自适应比特率流。
脱颖而出〔??〕〔??〕
在传统的广播电视中，运动图像是以隔行图像格式从电视台前端传输的。这意味着图片实际上将由多条单独的扫描线组成，其中每两到三帧视频将是前一帧和下一帧的混合，从而创建一个交错图像。随着更新的电视和电脑显示器技术的发展，网络上的视频图像是以渐进的方式传输的，这意味着每一帧都是一次传送到屏幕上的独立图像。迷惑？图 7-1 解释道。通过看左边的图像，你可以看到有一个模糊或重影的效果。这种效果就是交错的画面。在右边，你可以看到图像被去交错，或者说是渐进的，它不会产生模糊效果，因为图像是一秒钟的全帧。对于网络交付，最好使用渐进式方法。
图 7-1。隔行视频素材(左)和逐行视频素材(右)之间的视觉差异
FPS
每秒帧数 (FPS) 是组成整个视频序列的单个视频帧。可以把这想象成一组图像组成一秒钟的视频。当你还是个孩子的时候，你有没有制作过一本动画书，你在每张纸上画相同的图片，然后稍微调整一下，这样当你翻阅的时候，它就创建了一个无缝的动画。这本质上就是视频在做的事情。如果你还记得《??》第五章中关于 CSS sprite sheets 的讨论，同样的原理也适用于这里。对于去隔行视频，由于混合帧的出现，典型的 FPS 是 23.976 或 29.97，而逐行视频的典型 FPS 是 24 或 30，因为完整的单个图像在没有混合的情况下被渲染。具有大量快速移动动作的视频通常需要更高的帧速率来对抗不想要的抖动效果，如果您正在寻找超清晰的慢动作视频，同样的规则也适用。一些高端相机每秒拍摄几千帧视频，这可以创造出真正令人惊叹的慢动作镜头，用于创意。同样，对于 web 回放，您通常希望使用 24 或 30 FPS。
长宽比
与图像非常相似，视频也有宽度属性和高度属性。在视频中，很像图像，保持原始尺寸的比例很重要。在视频中，长宽比 是其宽度和高度的比例关系。网络视频中最常见的宽高比是 16:9 的宽屏格式和 4:3 的标准格式。这种比例关系与视频中像素的大小直接相关，因为像素可以是正方形或长方形。你会经常听到这被称为“16 乘 9”或“4 乘 3”保持您正在转码的视频的宽高比很重要，因为这将保持源视频资源和转码后的文件之间的一对一关系。但是，在某些情况下，您的创意会要求您将视频资源调整到非 16:9 或 4:3 设计的大小。在这种情况下，您将使用一种称为信箱或信箱 的技术，在分配的视频空间中的空白区域添加黑条。图 7-2 展示了一个比例正确的视频，其中应用了 16:9 和 4:3 宽高比的信箱和边框。
图 7-2。信箱视频和 pillarbox 的区别
最常见的情况是将视频提供给不同大小的广告单元或出版商的视频播放器。如果广告商的视频资源是 16:9，播放器环境是 4:3，您会注意到视频顶部和底部有黑条或信箱，以保持视频的比例。
工具
在我深入探讨视频编解码器这个大话题之前，你可能想知道为什么在使用 HTML5 时要学习所有这些与视频相关的信息。嗯，视频是目前在线广告中最流行的媒体，确保最佳的视频播放将赢得你的客户。因此，我将介绍需要了解的不同视频属性，以及该领域需要关注的不同编解码器/格式。这一切都归结于为分散的浏览器空间开发和交付最佳的 HTML5 视频。在开始实现之前，让我们看看一些创建 HTML5 视频的工具。
为什么会有所有这些不同的视频设置、变化以及分散的浏览器和设备支持？嗯，专利、版税(即金钱)和压缩质量是阻止某些东西开源和免费使用的原因。我喜欢这样想:每当你有一个真正伟大的产品，你通常会收费使用它，即使有免费的替代品。例如，你为有线电视付费，因为它质量更好，提供更多的频道，而不是标准的空中天线广播，在空中天线广播中，你只能收到有限的频道，而且广播质量很差。目前，如果你想将你的视频内容部署到最广泛的用户群，你需要在 HTML5 空间中容忍这些碎片化的编解码器和视频格式。有许多工具可以帮助你提供在线视频服务。其中许多都是用来转换视频成适当的格式使用免费或购买的程序在您的电脑上。这包括但不限于开源的 FFMPEG(ffmpeg.org)、FireOgg(firefogg.org)、QuickTime Pro(apple.com/quicktime)和 Adobe Media Encoder(adobe.com/products/mediaencoder.html)，甚至更强大的视频应用，如 Adobe After Effects(adobe.com/products/aftereffects.html)、Avid(avid.com)和 Apple Final Cut Pro(apple.com/finalcutpro)。
到目前为止，FFMpeg 是最健壮的，而且它是开源的，这意味着你可以轻松自由地通用转码/编码成各种不同的格式。这个工具可以将任何视频和音频格式转换成适合各种屏幕的格式。如果你习惯使用命令行，我强烈建议你使用 FFMpeg。这很可能是目前最强大的视频转换工具。此外，还有许多用于转换不同格式的插件和库。请务必咨询您的发行商，因为他们需要为他们的播放器提供一定大小的视频资源，并确保经常检查他们的规格并正确调整。
视频编解码器
现在，您已经了解了视频编码和转码的内容，我将谈谈您可以随意使用的视频编解码器，以及在利用 HTML5 视频时您将使用的编解码器。编解码器可能会有点混乱，因为有太多的编解码器可供选择，并且都有一定的变化和浏览器支持。一个视频编解码器是根据您的需要压缩视频的软件，正如您刚刚了解到的所有先前的视频属性，所有这些都可以使用视频特定编解码器进行配置。
本节并不打算让您成为视频编解码器方面的专家，但它会让您知道下次想要在您的活动中包含 HTML5 视频时，以及当您遇到来自各种创意机构的视频素材时，应该注意什么。编解码器具有特定的浏览器和设备支持，并且需要一个耗时的过程来向多个用户正确传送视频。图 7-3 展示了过去 12 年间视频编解码器的激增。
图 7-3。浏览器和制造商支持的各种视频编解码器(来源:【appleinsider.com】??
这可能看起来令人困惑，但正如您所看到的，大多数编解码器来了又去，就像许多其他技术一样，在本节的剩余部分，我将只讨论在今天的 HTML5 视频市场上仍然显而易见的编解码器技术，它们是 MP4 (H.264)、WebM (VP8)和 OGV (Theora)。我将排除 VC-1，因为在撰写本文时，没有浏览器支持这种编解码器/包装器变体。
H.264
我现在将讨论可能是现代网络上最流行的视频编解码器，MPEG 的 H.264 。H.264 编解码器是一种高度优化的编解码器，可提供最高的压缩率，对整个视频的质量几乎没有影响。H.264 可以在相对较低的比特率下提供很好的有损质量。H.264 带有许多可调整的参数和功能，事实上如此之多，如果你查找 H.264，你会对这种编解码器的能力感到惊讶。但是，您需要特别注意它的配置文件，即基线、主和高。某些设备(如旧款 iPhones 和 iPod touches)只能支持基本配置文件，而其他高端设备(如台式电脑和蓝光播放器)支持主配置文件到高配置文件。配置文件的级别是在 1 到当前的 5.2 之间的范围内测量的，随着配置文件级别的增加，比特率和通常的质量也会增加。
注要了解更多 H.264 视频，我建议在
sonnati.wordpress.com阅读法比奥·索纳蒂的作品。
H.264 由苹果、微软和各种其他大公司大力推动，目前苹果、微软和谷歌在其各自的浏览器中支持 h . 264，尽管谷歌已经提到它将停止对编解码器的支持，以支持其 VP8 替代方案(在下一节中对此有更多介绍)。然而，在撰写本文时，谷歌仍然在 Chrome 版本中支持它。此外，Mozilla 甚至讨论过支持 H.264，因为缺乏对其支持的开源编解码器 Ogg Theora 的支持(下一节将详细介绍)。H.264 在其称为 X264 ( x264.nl )的复杂编码算法上也有免版税的开源版本。
苹果公司是 H.264 编解码器的主要支持者，因为这是其 Safari 浏览器中唯一支持的编解码器，建议通过 Safari 为 iDevices 提供如图图 7-4 所示的编码设置。
图 7-4。苹果对 iOS 设备的编码建议
当您将视频部署到移动 iOS 设备时，关注这张图表非常重要。因为就像整体视频景观在编解码器中被分割一样，苹果自己的设备需要进行特定的调整，以补偿其旧设备，如 iPhone 3G，更不用说 WiFi 和手机网络连接了。这只会增加开发跨屏幕和设备部署的视频的时间。
请记住，H.264 不是自由软件；它由许多不同的公司拥有和申请专利，包括微软，它由一个名为 MPEG-LA 的财团管理。苹果公司为其生产的每一台可以编码和解码 H.264 视频的电脑、设备、相机和配件支付许可证。下次你购买苹果产品的时候考虑一下这个问题，因为你支付的一部分是使用 H.264 技术的能力。
VP8
HTML5 视频领域另一个流行的编解码器是 VP8 。曾经是 On2 的一项技术，后来被 Google 收购，被重新命名为 WebM 编解码器。谷歌一直在推动这一事实上的编解码器，在现代浏览器中使用 HTML5 传输视频时使用。然而，要使它完全成形，浏览器厂商需要采用它作为他们视频需求的标准。正如你刚刚了解到的，苹果和微软并没有太多地采用 WebM，因为他们长期支持 H.264。VP8/WebM 在编码算法和质量上与 h . 264 相当，但更重要的是它没有许可成本，这是开放 web 标准和支持它的浏览器(如 Firefox、Chrome 和 Opera)的巨大胜利。
西奥拉
H.264 虽然是开放标准，但并不是免费的。它是基于各种公司贡献的视频压缩和相关技术专利池，以换取“公平、合理和非歧视性”的许可费。Mozilla、Opera 和其他自由和开放源码的倡导者反对使用任何可能需要许可费的技术来生产或分发网络内容，因为否则将违背他们对开放网络的支持。正因为如此，除了 VP8 之外，他们还依赖于一种开源视频压缩技术，即 Xiph 基金会的 Theora。关于 H.264 的 Ogg Theora 战争结束了，HTML5 工作组成员同意，不要将 Ogg Theora 或 H.264 或任何其他东西定义为通过 HTML5 视频标签提供的视频的“基线”编解码器，而是应该由市场和网络用户及互联网广播公司投票决定(这显然造成了碎片化)。Theora 是早期版本的 Flash Video (FLV)中使用的旧 VP3 编解码器。他们采用了旧版本并加以改进。效率不如 H.264，但开源了。
从历史上看，HTML 总是与其他类型的图像媒体文件一起工作；没有基线图形格式。例如，开发人员自己决定是使用 GIF、JPEG 还是 PNG 格式。现代浏览器都支持它们，在我看来视频也应该效仿。
GOP 和关键帧
在压缩技术中，你有所谓的一组图片(GOP) 。该组由关键帧间隔决定。如果您曾经做过 Flash 动画或任何基于时间轴的动画工作，您会知道关键帧是重要事件发生的重要时间点。在视频压缩中，这些是视频回放中的点，在这些点上，编码/转码引擎有机会休息并重新分析视频内容，以确保其与编码过程的其余部分保持一致。有些编解码器支持不同的压缩算法 ，如 I、P 和 B 帧。
- I 帧:这是压缩率最低的帧，但不需要其他帧解码。
- P 帧:使用前一帧的信息进行解压缩。
- B 帧:这使用视频的前一帧和前一帧来获得参考，并获得最高的智能压缩量。
图 7-5 显示了不同帧类型的视频关键帧。如果您的客户要求您使用 HTML5 视频元素为各种屏幕优化他们的视频内容，请记住这些信息。但是，请注意，某些编解码器仅允许特定的关键帧设置。
图 7-5。压缩的 I、P 和 B 帧
有趣的是，压缩技术决定了编码文件的整体质量和大小；人们经常担心视频的大小，但实际上是大小加上时长。例如，如果您有一个 6MB 的文件，视频持续时间为 1 分钟，这意味着每 10 秒钟的视频就有 1MB 的数据。如果一分钟的视频有 60MB 的文件，那么每 10 秒钟就有 10MB 的数据，即每秒 1MB。所以，你需要在视频的大小和时长之间找到一个好的平衡点。一些机器和解码器根本不够快，无法以如此快的速度解码视频帧。如果数据速率太高而无法处理，你经常会看到机器在播放时被卡住；其他有足够的权力将处理它没有问题，并提供惊人的播放质量。这也是为什么更高端的显卡被用于专业视频编辑设备，以处理高数据速率。然而，对于 Web 和 HTML5 视频，在大小和持续时间之间保持良好的关系，尤其是在向手机和平板电脑等系统资源比台式机慢的设备交付时。
第十六章的规则
关于视频代码转换，最后一点需要注意的是“16 规则”如果您还没有，您会发现在为 Web 创建视频时，处理不同大小的视频资源并需要转码为不同的大小会有很多时间。我之前提到过，视频编码领域有一门科学，没有人比视频专家罗伯特·莱因哈特更擅长这门科学。据我所知，莱因哈特是第一个为这一规则命名的人。基本上，在高层次上，它分解了当执行代码转换作业时以及当机器解码视频以进行播放时，视频应该被转换成的最佳大小。如果你看一下图 7-6 ，你会注意到视频编码最好以 16 的倍数进行，质量会下降到 8(更好)和 4(好)。
图 7-6。 Robert Reinhardt 的图表用于优化视频大小
Reinhardt 的发现揭示了当帧宽度和高度使用 16 的倍数时，视频表现最佳。当您对下一个视频进行转码时，请记住这一点，虽然您可以使用任何宽度，但非最佳尺寸可能会导致质量下降和丢帧，并会对解码回放造成不必要的负担。为了保持最佳输出，您应该始终使用 16、8 或至少 4 的倍数的宽度和高度。倍数越低，质量和性能受到的影响就越大。一个非常好的书签工具是 Reinhardt 在 videorx.com/video-sizer 的视频分级器。此工具允许您插入您的数字，并在使用所需设置时获得关于转换工作好坏的即时反馈。如果你有兴趣了解更多关于编码、转码和压缩技术的知识，我强烈推荐你访问他的网站(【videorx.com/】??)。
包装纸
您已经了解了您需要了解的关于视频编解码器的知识，所以现在我将介绍支持每种类型的文件格式。容器格式，或包装器，是存储视频信息的文件格式。这是典型的 MOV、AVI 和 FLV 文件格式。这些容器都包含编码的视频信息以及关于文件的基本元数据信息。视频的包装很像图像的 PNG、JPEG 和 GIF 文件。事实上，它们在 HTML 标记中是如此的相似，如果你知道如何使用 img 标签，在你的浏览器中包含视频是非常简单的。
MP4
MP4 是大多数 HTML5 浏览器的常见网络视频格式，如苹果的 Safari、微软的 Internet Explorer 以及目前的谷歌 Chrome。如前所述，它实际上是容纳 AVC/H.264 编解码器的容器格式。对于这种容器类型，文件扩展名会有所不同，可以包括 M4P、M4V，甚至 Adobe 的 F4V。图 7-7 显示了撰写本文时当前的浏览器支持。
图 7-7。当前浏览器对 H.264/MP4 视频的支持(来源:【caniuse.com】??
MP4 是处理 HTML5 视频时的常用格式。事实上，根据我的经验，这是你最终要处理的最常见的形式，尤其是在移动设备上运行的广告活动中。广告商将希望瞄准市场上越来越多的苹果 iPhones 和 iPads，将 MP4 与 H.264 结合使用是实现这一目标的唯一途径。
注意移动视频通常在设备的原生视频播放器中播放，而不是在浏览器中。
WebM
另一种视频容器格式是 WebM ，如你所知，它包含了 Google 的开源 VP8 编解码器。简单来说，WebM 可以提供与 MP4 视频一样的质量，而不需要在微软和苹果浏览器上的渗透。此外，如果你关心支付版税或许可费，WebM 格式是你最好的选择，因为它没有专利。WebM 是为 Web 设计的，旨在缓解开放 Web 上的视频问题。谷歌试图提供一种高质量和高效的编码工具，任何人都可以免费用于他们的网络内容，谷歌正在积极努力使 WebM 成为通过 HTML5 视频标签在线提供音频和视频的开源标准。在撰写本文时，caniuse.com概述了对 WebM 格式的支持，如图图 7-8 所示。
图 7-8。当前浏览器对 VP8/WebM 视频的支持(来源:【caniuse.com】??
如果你有兴趣了解更多关于 WebM 视频容器格式的信息，我建议你访问谷歌位于 webmproject.org/docs/contai… 的 WebM 网站。请记住，任何提供给 Chrome、Firefox 和 Opera 用户的视频广告都可以安全地依赖这种格式。
注意安装了 VP8/WebM 编解码器的用户将能够在 Safari 和 IE 上观看视频。
格式
最后，还有 OGG 视频格式 。OGG 是一种开放容器格式，由开源基金会 Xiph 管理。仅举几个例子，OGG 的容器格式包括 OGG、OGV 和 OGA。基于 Theora 的视频压缩算法和 Vorbis 的音频压缩算法，OGG 旨在创建一个真正开源的视频编解码器/包装器，供任何人使用，而不管版税或许可权。很像前面的例子，图 7-9 概述了浏览器对 OGG 视频格式的支持。
图 7-9。当前浏览器对 caniuse.com/OGG 视频的支持(来源:
从这些图表中，我想你可以清楚地看到，在 HTML5 视频编解码器支持方面，谷歌 Chrome 是最强大的功能丰富的浏览器。然而，当使用 HTML5 视频时，您的大多数客户都希望跨所有浏览器访问，尽管对 HTML5 视频元素的支持几乎是 100%，但填充该元素的视频编解码器/格式仍然非常零碎，这要求您开发所有这些格式以实现跨浏览器渗透。是的，这确实是一个非常耗时的过程。
为了同时支持 HTML5 兼容浏览器和旧版本浏览器，建议您使用浏览器和设备检测，并通过在视频元素中包含 embed 或 object 标签来优雅地降级到替代视频体验，例如 Flash 故障转移，如下所示:
<video controls height='640' width='360'>
<source src='yourVideo.mp4' type='video/mp4' />
<source src='yourVideo.webm' type='video/webm' />
<! -- Flash Code Here -->
<embed src='yourVideo.flv' width='640' height='360' quality='high' type='application/x-shockwave-flash'></embed>
</video>
通过将闪存故障转移代码包含在视频标签中，如果浏览器无法识别视频标签，它将忽略该视频标签并使用闪存代码。相反，支持视频元素的浏览器不会呈现视频标记中的部分，在本例中是 Flash 嵌入代码。
阿尔法支持
Alpha 视频 是视频的透明部分。通常，视频将在绿色或蓝色屏幕上拍摄，然后在后期制作中使用键，即移除绿色或蓝色背景元素。完成抠像后，视频将被导出到支持 alpha 透明度信息的视频编解码器和格式。这在覆盖页面内容或在广告视频内容和发布者页面内容之间提供无缝集成的视频中很常见。图 7-10 显示了苹果的 QuickTime (QT) 7 Pro 中的编解码器“animation”以及 millions+的设置，millions+代表百万种颜色；另外，视频中保留了 alpha 信息。如果您从客户或代理处获取视频文件，最好使用 Apple 的 QuickTime 打开视频，然后按 Command+I(对于 Mac)或 Control+I(对于 Windows ),这将打开 QT 检查器面板。
图 7-10。苹果 QuickTime 播放器中的百万+信息
这种抠像技术会剔除所有具有相关颜色值的像素，这是您每天都会看到的，甚至可能不会注意到的。事实上，你有没有碰巧看到昨晚的天气预报？嗯，气象学家很可能站在一个绿色屏幕前，而不是一张实际的地图前。这里需要理解的重要一点是，这是任何媒体中视频的一个巨大的功能部分，当然还有在线媒体。在前沿广告活动中，在发布者页面上放置视频(无论是否互动)是必不可少的。一些最具创新性的主屏幕收购通过使用 alpha video 取得了很好的效果。
然而，在 HTML5 视频支持中，目前没有支持 alpha 通道的跨浏览器编解码器/包装器——没有 H.264、VP8 甚至 Vorbis。只有 VP8 显示出未来可以处理支持的承诺，但它仅限于在某些浏览器上工作，最重要的是，苹果的 Safari 没有显示出支持它的迹象，这是对移动设备整体市场份额的巨大损失。很明显，这是一个很大的问题，很快就会得到解决，但在此期间，设计人员和开发人员需要利用 HTML5 的 canvas 元素，在播放期间将视频中的位图数据写入 canvas 元素，并在那里输入像素。你可以在 jakearchibald.com/scratch/alp… 的或者 github.com/m90/jquery-… 的找到一个很好的例子。虽然没有真正的 HTML5 视频编解码器支持 alpha 信息，但对最终用户的影响基本相同；但是，请记住性能，因为通过组合两个元素将视频信息写入 canvas 元素，您实际上使浏览器的负载加倍了。在此期间，直到 HTML5 视频本身支持处理阿尔法信息的编解码器；您可以随时回切以使用 Flash Player，因为自 2005 年以来，它就通过 VP6 编解码器支持此功能。
视频传输
所以，你现在知道在网络上对视频进行编码和转码需要做多少工作了；我现在将谈论在网络上实际传送视频。HTML5 视频最大的问题之一是它的交付。传统上，Flash 广告会从流媒体服务器上下载视频，以避免在广告的整体 k 权重中产生任何视频文件大小。然而，对于 HTML5，我们目前受限于标准的流媒体解决方案，正因为如此，大多数通过桌面和移动交付的 HTML5 视频仍然使用基于 HTTP 的渐进式下载作为主要交付方法。虽然这种方法在所有浏览器中都得到了广泛的支持，但它不可避免地会增加广告的权重，并通过更长的“等待”时间来影响用户的体验。当更大尺寸和更高质量的视频素材(HD)的视频比特率增加时，这也变得越来越糟糕。
在视频创作和交付的庞大世界中，最终要定义你想要接触的目标用户群(在广告中通常是每个人)、你可支配的资源以及客户周转时间。在操作上，转换所有不同风格的视频可能是一项非常耗时的任务，因为浏览器和设备需要不同的编解码器和格式。以下部分将帮助您了解该领域当前的问题，如何解决这些问题，以及如何在符合 HTML5 的视频播放器中有效地交付您的内容。
通过视频广告网络和出版商的交付规格可能会很棘手。每个出版商和网络都有自己的规范，这增加了这个领域的混乱。这些规范通常是为了确保对最终用户的影响较小，并确保视频内容达到最大范围，同时尽可能与发布者的视频内容相匹配。以下部分涵盖了当今网络上视频传输的两种方式。
进步分子
渐进式视频传输是指文件从一台服务器上传下来，并存储在客户端以供播放。渐进式交付是一种非常常见的视频传输形式，因为它可以被所有浏览器和设备接受，甚至像 YouTube 这样的主要网站每天都在使用这种方法。渐进式可以允许用户在完全下载之前开始观看视频，因此等待时间显著减少，但它也有很大的成本，因为实际文件是缓存在客户端上的。Progressive 通常是通过 HTTP 协议提供的，因为实际的素材存储在客户机上，所以理论上用户可以保存该素材供以后查看。对于广告来说，这不是一个问题，但对于优质的长篇内容，在这方面几乎没有保护，这使得这种交付形式对内容所有者来说不太理想。清单 7-3 展示了一个 HTML5 视频标签的例子；指向 MP4、WebM 或 OGG 等视频资源，您会看到该视频将被逐步下载。
清单 7-3。 HTML5 渐进式视频示例
<video autoplay src='http://cdn.someSite.com/someVideo.mp4'></video>
如你所见，我正在通过 HTML5 视频源从 someSite.com 的服务器上下载 MP4 视频资源。如果要将这一行代码插入到文本编辑器中，请将其保存为。html 文件，并在浏览器中打开它，您就可以看到视频自动播放。(请记住，您需要更新您的视频 src 属性，以指向实际视频所在的位置。).虽然这种方法在广告场合不太理想，但 IAB 为视频文件大小设定的规范是 2.2MB。有关富媒体指南的更多信息，请访问 www.iab.net/displayguid…
流动
接下来，我将讨论第二种网络视频传输形式。流式传输交付是指视频素材由流式服务器提供，并根据用户请求实时呈现给用户。由于素材没有存储在客户端的机器上，流媒体是保护优质内容以及规避发行商文件大小限制的理想选择。出版商和广告服务器可能需要使用流式视频，因为它不会像渐进式下载那样影响广告单元的整体文件大小。常见的流服务器协议是实时消息协议(RTMP) 。这种服务器协议最初由 Macromedia 开发，后来被 Adobe 收购，它支持内容保护加密和 HTTP 隧道以穿越防火墙限制。也存在许多其他流媒体服务器，如苹果 QuickTime 流媒体服务器，但它们的运行和操作都非常昂贵，除非你是一家专注于视频传输的大公司。如果你是 Hulu 或网飞这样的主要内容提供商，流媒体服务器或多或少是保护你的内容免受下载和盗版以及提供良好用户体验的必要条件。
客户可能会要求您进行实时直播，例如在通过网络传输的同时拍摄视频并压缩视频。这在体育、政治和新闻等公开广播的重大事件中很受欢迎。Influxis(influxis.com)等公司使用基于 Adobe Media Server(正式名称为 Flash Media Server)的技术使这变得非常简单，Adobe Media Server 支持将视频流传输到 Flash 播放器和 HTML5 视频播放器。然而，请记住，也有免费的替代产品，如 UStream、JustinTV 等，但它们不提供与付费服务相同的支持、质量和服务。
从用户体验的角度来看，流媒体也是相当困难的，因为用户不能像渐进式文件那样准确地浏览时间线。这是因为播放器需要使用用户想要的更新来 ping 流媒体服务器，并且因为信息不存在于客户端(像 progressive)，所以需要在用户放下视频播放头时发出请求，这产生了一些不需要的视频缓冲。
还有所谓的 HTTP 上的自适应流，它基本上通过标准 HTTP 协议传输小块视频信息，但我将在下面的部分中更详细地讨论这一点。
自适应流式传输
带宽在网络上是一个至关重要的问题，你需要知道你用了多少带宽来通过 HTML5 进行视频传输。越来越多的设备正在访问信息，作为开发人员和设计人员，我们需要尽可能节省带宽，尤其是在通过各种网络连接提供较大文件时。作为广告客户，您需要考虑到用户可能正在无线设备上通过较差的蜂窝网络连接查看内容，或者更糟的是离线查看内容。幸运的是，使用复杂的编程技术；开发人员可以利用带宽检测，并在最终用户请求时向其提供适当的视频文件，同时在用户连接中断时限制播放。
我现在将介绍自适应比特率流 。这项技术算不上新技术，但通过检测和适应各种条件来提供高质量的视频体验比以往任何时候都更重要。在自适应比特率流中，服务器 pings 请求内容的用户，并了解用户可以处理视频回放和比特率质量的级别。之前，我讨论了视频文件的比特率以及比特率如何保存视频素材的所有信息。一旦收集了关于用户处理视频内容的能力的信息，就如描述或清单文件所描述的那样传送适当比特率的视频。这个过程发生在整个视频回放过程中，并且随着带宽的增加或减少而适应或改变。这为最终用户提供了一个无缝的回放，无论连接质量如何，这是一个对长格式内容非常重要的功能，尤其是在移动设备上。典型的使用案例从较低比特率的视频开始，随着带宽被检测到并被发现更加充足而逐渐增加。这个上升时间可能需要几秒钟，所以短格式内容可能看不到效果。
现在，您已经了解了自适应比特率的基础知识，让我们深入了解支持它的各种技术，以及如何在 HTML5 视频工作流中利用每项技术。请记住，视频流可能还没有标准，但当您知道您的广告将针对特定的浏览器和设备时，我们鼓励您使用这些技术。
流媒体
HTTP Live Streaming (HLS) 是 Apple 的规范，用于以 M3U8 文件的方式通过 HTTP 传输视频文件的片段(传输流)。苹果的开发者工具包括一个媒体分割器，这是一个命令行工具，供 Mac 用户分割和创建他们想要使用的视频素材的清单文件。清单 7-4 指示媒体文件分段器(developer . apple . com/library/IOs/# documentation/networking internet/conceptual/streaming media guide/UsingHTTPLiveStreaming/UsingHTTPLiveStreaming . html)在您的位置获取一个 H.264 文件，并将输出分段到一个 M3U8。M3U8 文件只是一个描述文件，指示 HTML5 视频播放器如何播放视频片段以及特定的视频元数据。在本例中，将段和 M3U8 文件保存在您想要的目标位置，每个块的目标持续时间大约为 17 秒。
清单 7-4。 媒体分割器示例
mediafilesegmenter Your/File/Location.mov -t 17 -f Your/File/Destination.m3u8
由于媒体文件被分割成更小的“块”或片段，因此视频资源的传送是突发的，而不是一个大的渐进式下载，这改善了整体回放体验。这在 HTML5 广告中对您的意义在于，您现在不是定位源资源，而是在您的视频源属性中定位 M3U8 文件。基于前面的命令，清单 7-5 展示了一个清单文件的输出，该文件被称为 M3U8 文件。
清单 7-5。 M3U8 举例
M3U8 File:
#EXTM3U
#EXT-X-TARGETDURATION:18
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:16.984,
fileSequence0.ts
#EXTINF:17.017,
fileSequence1.ts
#EXTINF:16.95,
fileSequence2.ts
#EXTINF:17.017,
fileSequence3.ts
#EXTINF:16.95,
fileSequence4.ts
#EXTINF:17.017,
fileSequence5.ts
#EXTINF:16.95,
fileSequence6.ts
#EXTINF:17.017,
fileSequence7.ts
#EXTINF:16.984,
fileSequence8.ts
#EXTINF:16.316,
fileSequence9.ts
#EXT-X-ENDLIST
HTML5:
<video src=index.m3u8></video>
如您所见，M3U8 文件按顺序描述了所有视频传输流以及传输流(TS)资源的相对路径。请注意，这些可能是到另一个位置的绝对路径，甚至是远程的另一台服务器上的路径。注意这一点很重要，因为您可以在 M3U8 清单中动态插入视频广告。
由于这是苹果公司的定义，而不是一个开放的网络标准，采用仅限于某些设备和浏览器；然而，在最近的新闻中，Adobe 展示了 Flash Player 10.1 中对 HLS 的支持，因此如果您的目标是 HTML5 的 Flash Player 回切，您可以使用相同的交付机制。要查看 HLS 的良好示例，请访问 Wowza 在wowza.com/html/iphone.html的示例。
注在撰写本文时，HTML5 HLS 支持仅在 iOS、Safari、Android 3.0+中。
快速交货服务（Hot Delivery Service 的缩写）
说到 Adobe 对 HLS 的支持，Adobe 也支持自己的通过 HTTP 传输视频的规范。Adobe 的解决方案叫做 HTTP 动态流(HDS) 。Adobe 有自己的清单规范，用于通过 HTTP 向其开源媒体框架(OSMF)提供视频数据包。与 HLS 非常相似，HDS 需要一个视频资源(MP4)和一个清单文件，即 F4M 文件。
下面是 F4M 清单文件的一个例子；请注意，该文件只是一个简单的 XML 模式，其中有一个基本文件节点，其中包含一个媒体和不同媒体 URL，用于不同比特率的各种视频。
<?xml version="1.0" encoding="utf-8"?>
<manifest FontName3">http://ns.adobe.com/f4m/1.0">
<id>videoRx.com :: Adaptive Bitrate Video Player</id>
<mimeType>video/mp4</mimeType>
<baseURL>rtmp://hosted.videorx.com/vods3</baseURL>
<media url="vid1.mp4" bitrate="385" width="364" height="156" />
<media url="vid2.mp4" bitrate="508" width="436" height="184" />
<media url="vid3.mp4" bitrate="651" width="506" height="214" />
<media url="vid4.mp4" bitrate="1030" width="646" height="274" />
<media url="vid5.mp4" bitrate="1487" width="858" height="364" />
</manifest>
注意在撰写本文时，只有 Windows 和 Linux 操作系统支持 Adobe file packager for HDS。
平滑流式传输
既然你已经看到了苹果和 Adobe 通过 HTTP 传输视频内容的规范，让我们来看看微软的平滑流规范。清单 7-6 展示了为 Silverlight、Windows Media Player 和其他能够平滑流式传输的设备生成自适应流式传输的清单文件。
清单 7-6。 微软的流畅流媒体例子(来源:Silverlight.net)
<SmoothStreamingMedia
MajorVersion="2"
MinorVersion="0"
Duration="5964800000">
<StreamIndex
Type="video"
Chunks="299"
QualityLevels="3"
MaxWidth="368"
MaxHeight="208"
DisplayWidth="368"
DisplayHeight="208"
Url="QualityLevels({bitrate})/Fragments(video={start time})">
<QualityLevel
Index="0"
Bitrate="477000"
FourCC="WVC1"
MaxWidth="368"
MaxHeight="208"
CodecPrivateData="250000010FC38E0B70678A0B7819E80450808E8E7474400000010E5A67F840" />
<QualityLevel
Index="1"
Bitrate="331000"
FourCC="WVC1"
MaxWidth="284"
MaxHeight="160"
CodecPrivateData="250000010FC38A08D04F8A08D813E80450808A1950CF400000010E5A67F840" />
<QualityLevel
Index="2"
Bitrate="230000"
FourCC="WVC1"
MaxWidth="224"
MaxHeight="128"
CodecPrivateData="250000010FC38606F03F8A06F80FE80450800704704DC00000010E5A67F840" />
<c n="0" d="19999968" />
<c n="298" d="4166661" />
</StreamIndex>
<StreamIndex
Type="audio"
Index="0"
FourCC="WMAP"
Chunks="299"
QualityLevels="1"
Url="QualityLevels({bitrate})/Fragments(audio={start time})">
<QualityLevel
Bitrate="64000"
SamplingRate="44100"
Channels="2"
BitsPerSample="16"
PacketSize="2973"
AudioTag="354"
CodecPrivateData="1000030000000000000000000000E00042C0" />
<c n="0" d="22755555" />
<c n="298" d="4992290" />
</StreamIndex>
</SmoothStreamingMedia>
为了节省空间，我删除了 0 到 298 之间的段，但是在本例中，您可以看到，这种格式将媒体分成流索引，其中类型为视频或音频。同样，您应该看到不同交付规范之间的趋势，因为它们都依赖于某种形式的指令或清单文件。
注意某些活动可能需要流畅的流媒体才能使用。这通常是对 Silverlight 播放器、Windows Phone 7 和 Xbox 游戏机的微软视频广告的要求。
MPEG-DASH
从前面的例子中可以看出，通过 HTTP 传输视频的碎片越来越多，竞争越来越激烈。当开放的网络世界寻找一站式 HTTP 交付解决方案，以满足来自 Adobe、微软和苹果的所有平台和浏览器时，DASH promoters group(dashpg.com)正准备这样做。目前，该小组正在制定一个标准，希望在市场上获得采用，并成为跨浏览器和设备的普遍解决方案，同时使用 HTML5 视频。
遇见 MPEG-DASH 。DASH 代表 HTTP 上的动态自适应流。该小组在该规范上的工作始于 2010 年，目的是为音频和视频提供一种不可知的交付机制，这种机制需要一个标准清单文件来跨防火墙和直接 HTTP 部署。Adobe、Akamai、微软等公司，甚至思科和三星等设备制造商在行业中的采用越来越强劲。
2012 年，Adobe 和 Akamai 在 NAB 会议上发布了 DASH 在最新 Flash 播放器中工作的示例，这引起了业界的极大兴趣，尤其是对 HTML5 支持的意向。DASH 使用所谓的媒体呈现描述 或 MPD 清单来定义其传输流，很像 HLS 中的早期示例清单。DASH 演示文件(MPD)有望成为在 HTML5 浏览器和设备中交付所有视频的全方位解决方案，而不仅仅是 Flash Player。清单 7-7 显示了一个 DASH 清单文件的例子。
清单 7-7。 MPEG-DASH 示例
<MPD type="static" profiles="urn:mpeg:dash:profile:full:2011" minBufferTime="PT1.2S" mediaPresentationDuration="PT0H2M59.23S">
<Title>MPEG-DASH Example</Title>
</ProgramInformation>
<Period start="PT0S" duration="PT0H2M59.23S">
<AdaptationSet>
<ContentComponent id="1" contentType="video"/>
<SegmentTemplate initialization="vid.mp4"/>
<Representation id="1" mimeType="video/mp4" codecs="avc1.64001f" width="1280" height="720" startWithSAP="1" bandwidth="534520">
<SegmentTemplate timescale="1000" duration="9750" media="vid.mp4." startNumber="1"/>
</Representation>
<Representation id="2" mimeType="video/mp4" codecs="avc1.64001f" width="1280" height="720" startWithSAP="1" bandwidth="812797">
<SegmentTemplate timescale="1000" duration="9750" media="vid.mp4" startNumber="1"/>
</Representation>
<Representation id="3" mimeType="video/mp4" codecs="avc1.64001f" width="1280" height="720" startWithSAP="1" bandwidth="1607936">
<SegmentTemplate timescale="1000" duration="9750" media="vid.mp4" startNumber="1"/>
</Representation>
<Representation id="4" mimeType="video/mp4" codecs="avc1.64001f" width="1280" height="720" startWithSAP="1" bandwidth="3088816">
<SegmentTemplate timescale="1000" duration="9750" media="vid.mp4" startNumber="1"/>
</Representation>
<Representation id="5" mimeType="video/mp4" codecs="avc1.64001f" width="1280" height="720" startWithSAP="1" bandwidth="3861547">
<SegmentTemplate timescale="1000" duration="9750" media="vid.mp4" startNumber="1"/>
</Representation>
</AdaptationSet>
<AdaptationSet>
<ContentComponent id="1" contentType="audio" lang="en"/>
<SegmentTemplate initialization="vid.mp4"/>
<Representation id="1" mimeType="audio/mp4" codecs="mp4a.40.02" sampleRate="44100" numChannels="2" lang="en" startWithSAP="1" bandwidth="257141">
<SegmentTemplate timescale="1000" duration="9980" media="audio.m4s" startNumber="1"/>
</Representation>
</AdaptationSet>
</Period>
</MPD>
在前面的例子中，您可以看到 MPD 文件实际上只是简单的 XML，概述了视频播放器摄取的指令。您会注意到，在 XML 中，某些节点概括了 DASH player 要解释的指令的表示。DASH 与视频编解码器无关，理想情况下，通过浏览器和设备的采用，MPEG-DASH 将成为通过 HTTP 传输 HTML5 视频的事实标准。如果这种采用，我相信会的，你会看到完全在客户端处理的动态视频广告的非常好的用途。基本上，清单文件实际上只是一个播放列表或描述文件；当观众开始观看开始的几个片段时，描述中后面的片段可以被保留用于目标广告。这将消除在服务器上渲染成千上万的定制视频排列以将它们瞄准正确观众的需要。借助 DASH，可以相当简单地实现真正可寻址的视频内容。
注你会在第十一章中了解到更多关于动态广告的内容。
云服务
你可能会问，“关于视频的编码、转码和交付问题，有这么多讨论，一个组织如何在运营上理解这些问题并实现盈利？”
不用担心，有很多云编码服务 ，如Encoding.com (Vid.ly)、Wowza、Zencoder、Akamai 和其他旨在为企业和内容所有者缓解这种视频碎片化的服务。这些服务允许您将源媒体素材上传到他们基于云的服务；然后你选择你想要的目标设备和浏览器，它们处理代码转换和交付过程。可以说，你甚至可以打开“遮光罩”，真正自定义你在本章中学到的视频编码参数，也就是说，如果你觉得这样做足够舒服的话。这些云服务通常位于亚马逊云服务器之上，随着更多的请求进入，它们会启动更多的服务器来处理转码作业。这极大地减少了运行和维护几个服务器的开销，这些服务器在给定时刻可能工作，也可能不工作。如果您正在为一个主要的媒体网络构建一个内容站点，或者是一个希望在所有屏幕上进行部署的内容所有者，那么您会想要看看这些白标解决方案中的一个。有一个外部服务处理你的视频转换成所有正确的格式是一件幸事；它允许你“推卸责任”给你的客户，让你从管理、转换和托管所有视频素材的操作噩梦中解脱出来。这个过程适用于 YouTube、Vimeo、Ooyala、Brightcove 和其他网站。我相信随着更多像开源 WebM 编码和播放器无关的 MPEG-DASH 交付这样的解决方案变得可用，我们作为一个行业将会走出碎片化的困境。我希望几年后我们都能反思这一点，并对我们不得不跨越的部署视频的疯狂障碍摇头。
内容交付网络
如果你希望托管你的素材，而不是让第三方来托管，这些云服务中的大多数会自动将转码后的视频文件传输到你的托管服务器上，并允许缓存到内容交付网络(CDN) 。在 CDN 上存储素材(视频、JavaScript 文件、CSS 文件、图像等)允许素材存储在共享网络上的多个服务器位置。在多个服务器上缓存这些素材被称为边缘缓存。本质上，您将素材放在网络的最边缘，因此请求素材的用户不必向离他们太远的位置发出 HTTP 请求。我喜欢维基百科给 cdn 的定义:
CDN 是一个包含数据副本的计算机系统，放置在网络中的不同点，以最大化带宽，通过网络从客户端访问数据。与所有客户端访问相同的中央服务器相反，客户端访问客户端附近的数据副本，以避免该服务器附近的瓶颈。 来源:维基百科
你可以在图 7-11 中看到这个过程的可视化。
图 7-11。网络上单个服务器和多个服务器的过程(CDN)
图 7-11 在左边展示了一个服务器如何包含数据，而右边的图像(CDN)有多个数据副本来支持多个用户请求内容。事实上，如果你正在建立任何大型企业视频网络，如 YouTube、网飞或 Vimeo，CDN 将是你的用户的一个要求，因为它将加快视频播放到用户机器的响应时间。
HTML5 视频开发
对于许多浏览器来说，HTML5 video 仍然是一个相对较新的功能，有些技术已经做了很长时间，比如 Flash，浏览器需要花时间来实现规范并获得用户的采纳。很明显，当谈到视频编解码器和交付时，这是一个碎片化的空间，但对于全屏支持和字幕来说更是如此。
全屏 API
全屏 API 是 Flash 和 Silverlight 等插件已经有一段时间的特性，它也正在成为浏览器的一个特性。目前，浏览器中的大多数全屏选项只是将视频对象缩放到浏览器窗口的高度和宽度，而不是接管显示器全屏的预期方法。这是在广告中提供游戏的广告商特别是娱乐客户喜欢的另一个功能，因为它允许用户完全沉浸在内容中，无论是互动游戏还是高清视频预告片。至少可以说，全屏 API 在不同的浏览器厂商中有很大的差异，所以请务必查看 caniuse.com/#search=ful…](caniuse.com/#search=ful…)
全屏 API 的有趣之处在于，当它被支持时，它应该在 CSS 中包含一个伪类。这里有一个例子:
<style>
video:-webkit-full-screen {...}
video:-moz-full-screen {...}
video:fullscreen {...}
</style>
前面的代码允许开发人员和设计人员在全屏模式下自定义视频和广告内容的布局。目前，如果您想对视频或画布元素使用全屏 API，您将需要使用 Webkit 和 Mozilla 的供应商前缀来调用 JavaScript 方法，如下所示:
<script>
someElement.requestFullscreen(); //go fullscreen
someElement.exitFullscreen(); //exit fullscreen
</script>
请注意，在 Opera 的新版本中，您不必这样做，因为有本地支持！
字幕和说明文字
HTML5 视频的另一个发展中的功能是所谓的文本轨道 API ，它将允许全球观众访问视频内容。例如，广告和广告商可能希望将其内容的画外音作为字幕，并普遍使用创意元素，这意味着只要字幕使用正确的语言，就可以让单个视频资源在多个位置运行。Google I/O 演示中的图 7-12 显示这可能是一个非常有益的特性。
图 7-12。与美国接入需求相比的互联网使用情况
虽然这只是整个市场的一小部分，但我们不应该将这些用户排除在在线体验之外。网络应该为每个人服务！利用字幕的另一种可能方式是在视频播放时包含相关数据。想想基于位置的齿轮报价，并通过字幕文本添加本地化的方向。使用字幕的一个好处是它们是可搜索的，因此内容提供商和出版商也将从 SEO 增长中受益。WebVTT 文件 概述了用于视频解析的描述文件，并收集了回放时应该在屏幕上预设的信息。清单 7-8 演示了 WebVTT 文件格式。
清单 7-8。 WebVTT 示例
WEBVTT FILE
0:00:00.000 --> 0:00:02.000
<b>Hello, World!</b>
0:00:03.040 --> 0:00:06.920 T:60% A:middle
Just <i>dropping</i> by to say <i>HELLO!</i>
在这段代码中，一个示例 WebVTT 文件在视频回放时显示屏幕上的文本。正如你所看到的，在 0 秒和 2 秒的时间之间，单词“Hello，World”将以粗体文本出现。使用一些基本的 HTML 标记来加粗、倾斜和加下划线，以及使用中间位置，你可以真正地给副标题内容添加一些味道。当前规范允许水平文本位置、对齐和垂直线位置。您甚至可以使用 CSS，通过一个名为 cue 的新伪元素，根据您的喜好来设计标题。参见清单 7-9 了解更多关于如何在 CSS 中实现 cue 元素的信息。
清单 7-9。 WebVTT Cue 示例
WEBVTT
1
0:00:00.000 --> 0:00:05.000
<b>Hello, World</b>
2
0:00:05.000 --> 0:00:10.000
How <i>are</i> you <i>,<c.green>Today?!</c></i>
CSS
<style>
.green {
color: green;
text-transform: uppercase;
}
</style>
HTML
<video width="640" height="360">
<source src="someVideo.mp4" type="video/mp4" />
<source src=" someVideo.webm" type="video/webm" />
<source src=" someVideo.ogg" type="video/ogg" />
<track src="helloWorld.vtt" kind="subtitles" srclang="en" label="English" />
</video>
注意确保你的服务器的。htaccess 或 http.conf 文件被配置为支持 VTT MIME 类型。请使用 AddType text/vtt .vtt。
使用 HTML5 视频中的 track 标签，您可以显示字幕、副标题和/或关于视频内容的元数据，使用前面的示例，您可以看到您甚至可以将特定的 CSS 规则指向副标题信息。track 元素的文件格式使用一个 WebVTT 文件，浏览器支持目前是有限的，但它即将到来！使用前面的代码，你应该会看到一个类似于图 7-13 的例子。
图 7-13。 WebVTT 视频字幕
如果您没有看到这一点，请确保您的浏览器支持 WebVTT 和 HTML5 视频轨道元素；如果你的浏览器两者都不支持，我建议你使用一个很棒的叫做 captionatorjs.com 的 JavaScript polyfill。
这可能是使用网络标准的动态视频广告的巨大进步。真正令人兴奋的是，如果 WebVTT 格式开始支持更多的 CSS 功能，甚至 CSS3 的功能，包括变换和动画，您将有能力在视频上进行一些非常真实的动态内容插入。在那之前，我们只能等待并找出答案。关于 WebVTT 规范的更多信息，我鼓励你访问dev.w3.org/html5/webvtt，如果你有兴趣了解你的 WebVTT 是否有效，你可以将有用的链接【quuz.org/webvtt】?? 加入书签。
注意我将在第十二章中讨论其他新兴的 HTML5 视频功能，如网络摄像头和麦克风接入。
视频测量
如你所知，视频的很大一部分是对广告客户的衡量，这样他们就可以看到他们的活动如何为他们服务。他们通常想知道观众观看视频时视频的表现如何。测量还包括视频开始、完成、四分位数、播放、暂停、重放、声音开/关等。几乎任何用户操作的开关、按钮或开关，广告服务器都会报告。HTML5 视频 API 通过 JavaScript 公开所有这些视频属性，因此附加事件和跟踪调用非常简单。有关所有视频属性的更多信息，请访问www.w3.org/2010/05/vid…。
QOS
除了正常的广告服务器报告，广告商还可以将分析引擎嵌入到他们的视频内容和视频播放器中，以实时报告视频的服务质量(QOS)。Akamai 等公司利用其媒体分析工具，这是一种可以捆绑到视频播放器中的 API，因此可以对视频进行实时技术分析。这种分析可以包括服务的最高比特率、带宽和网络连接、每秒帧数，甚至回放帧速率。通过这些测量，公司可以切入可能效率低下的媒体文件，并重新优化以获得更好的用户体验。很多这种 QOS 与视频的“垃圾输入，垃圾输出”规则直接相关，在这种情况下，您只能保持转码后的视频文件的质量；你不能在他们被操纵变坏后再增加他们。这些分析允许广告商、内容所有者和广告服务器测试他们的内容如何表现的真实世界的例子。
视频播放器
随着越来越多的浏览器市场及其各自的用户群支持 HTML5 视频标签，各种视频播放器变得越来越符合 HTML5。YouTube、Vimeo、Brightcove 和其他公司通过提供 HTML5 视频来实现这一点，同时根据需要优雅地失败于 Flash 或 Silverlight 体验。此外，网飞和 Hulu 等需要 DRM 保护的公司依赖于这些插件技术，因为 HTML5 视频规范中没有流保护标准，但有一个标准正在制定中。我已经讨论过的一些交付格式(比如 HLS)可以使用从服务器到客户端的令牌/密钥交换来提供某种保护，但是这个特性目前只在 Safari 浏览器中受支持。
由于广告客户需要将广告部署到各种视频播放器，IAB 和行业工作组已经开发了一个通用的标准规范，用于将广告标签传送到出版商和网络视频播放器。该规范称为“广阔”。
广阔的
视频广告投放模板(VAST ) 是视频播放器的通用标签投放格式。目前在 2.0 版本中，VAST 的目标是通过创建一个所有播放器都可以并且应该遵守的通用定义，来缓解所有各种视频播放器的广告交付要求。VAST 允许在视频内容之间轻松插入广告，也称为视频预播放或流内视频 。视频播放器将通过 URL 请求联系广告服务器，广告服务器将使用有效的 XML 标记进行响应。清单 7-10 显示了一个来自虚拟广告服务器的巨大响应的例子。
清单 7-10。 浩瀚的例子
<VAST version="2.0">
<Ad id="12345">
<InLine>
<AdSystem>Acudeo Compatible</AdSystem>
<AdTitle>VAST 2.0 Instream Test</AdTitle>
<Description>VAST 2.0 Instream Test</Description>
<Error>http://url/error</Error>
<Impression>http://tracking/impression</Impression>
<Creatives>
<Creative AdID="12345">
<Linear>
<Duration>00:00:30</Duration>
<TrackingEvents>
<Tracking event="creativeView">http://tracking/creativeView</Tracking>
<Tracking event="start">http://tracking/start</Tracking>
<Tracking event="midpoint">http://tracking/midpoint</Tracking>
<Tracking event="firstQuartile">http://tracking/firstQuartile</Tracking>
<Tracking event="thirdQuartile">http://tracking/thirdQuartile</Tracking>
<Tracking event="complete">http://tracking/complete</Tracking>
</TrackingEvents>
<VideoClicks>
<ClickThrough>http://www.somedomain.com</ClickThrough>
<ClickTracking>http://tracking/click</ClickTracking>
</VideoClicks>
<MediaFiles>
<MediaFile delivery="progressive" type="video/x-flv" bitrate="800" width="640" height="360" scalable="true" maintainAspectRatio="true">
http://cdn.somedomain.com/video</MediaFile>
</MediaFiles>
</Linear>
</Creative>
<Creative AdID="12345Companion">
<CompanionAds>
<Companion width="300" height="250">
<StaticResource creativeType="image/jpeg">http://cdn.somedomain.com/some.jpg</StaticResource>
<TrackingEvents>
<Tracking event="creativeView">http://tracking </Tracking>
</TrackingEvents>
<CompanionClickThrough>http://www.somedomain.com</CompanionClickThrough>
</Companion>
</CompanionAds>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
从示例中可以看出，XML 概述了视频播放器要处理的许多有用的值，包括各种广告服务器 id、创意和媒体 URL、跟踪节点以及创意的大小。根据这些信息，视频播放器将拥有部署广告所需的一切。
注意有不同版本的广告可以投放:线性和非线性。线性表示它发生在视频内容之前，而非线性发生在内容中间，通常作为叠加。
如果您要测试前面的巨大广告标签，它会失败，因为它只是一个模拟；但是，您可以通过访问 IAB 的网站并下载一些样本(http://IAB . net/guidelines/508676/digital video/vsuite/vast/vast _ copy/vast _ XML _ samples)来了解这些样本标签是如何工作的。一旦你得到一个样本，打开谷歌位于developers . Google . com/interactive-media-ads/docs/VAST Inspector _ dual的 VAST Inspector 并粘贴广告标签。你应该看到一些示例内容，如图图 7-14 所示。
图 7-14。典型的流内巨幅广告
请记住，许多出版商和广告网络依赖于出版商端平台，如 Adobe 的 Auditude(adobe.com/products/auditude.html)或平台(theplatform.com)来处理他们的媒体内容和传播他们的广告。这些工具可以将视频资源编码为所需的规格，以便它们可以跨平台和设备运行。使用这个平台对广告商和广告服务器同样有利，因为他们可以利用出版商的交付规范，提供与他们制作的内容质量一样好的视频广告。当内容切换到广告时，这提供了类似广播的体验，反之亦然。
视频播放器广告界面定义
既然你已经知道了如何通过 VAST 向视频播放器提供视频广告，你可能会想，“我如何让它具有互动性？那不会和视频播放冲突吗？”这就是 VPAID 发挥作用的地方。视频播放器-广告接口定义(VPAID) 本质上是一个 API，通过各种暴露的 API 调用，从广告单元内部与视频播放器进行通信。
VPAID API 被嵌入到创意的 JavaScript 中，向发布者视频播放器发出某些命令，例如“暂停视频；用户想要扩展广告”或“您可以恢复播放；用户已关闭广告。这些指令允许播放器内容和广告体验之间的无缝集成。此外，它是由 IAB 和其他机构支持的业界采用的标准。利用 VPAID 的广告与 VAST 协同工作；VPAID 处理交互性，VAST 处理交付。利用这两个优势将使您的广告标签可以轻松地在多个视频播放器上运行，但请确保您联系了某些出版商，以确保他们的播放器符合 VAST 标准，并且可以在开发您的创意执行之前处理 VPAID API。
使用 VPAID，如果广告商想要做与页面周围元素互动的播放器外视频广告，这可能会变得非常有趣。显然，这将是一个相当复杂的媒体计划，因为出版商很可能都需要一个特定的创意版本，但一次性的解决方案可以更容易地完成。有关 VPAID 和 JavaScript API 文档的更多信息，请访问iab.net/media/file/VPAID_2.0_Final_04-10-2012.pdf；请注意，3.0 版本将很快推出。
VMAP
视频多广告播放列表(VMAP) 是一种新的协议，当内容所有者不控制视频播放器或内容分发出口时，它允许内容所有者描述广告时段或插播应该放置在他们的视频内容中的何处。视频广告增强包括对“可跳过”视频广告的支持，这允许发布者和内容所有者基于可以播放完整或提供可跳过功能的广告来进行不同的定价。此外，还支持在单个广告时段中显示“pod”或多个广告。这允许创建与广播电视类似的体验，在广播电视中，你经常会在 30 秒的广告时段中看到两个 15 秒的广告。欲了解更多关于国际实验室 VMAP 规范的信息，请访问 iab.net/guidelines/…
移动视频
移动视频内容 正在快速增加，随着越来越多的人将目光放在更小的屏幕上，广告商很快也会跟进。目前，技术的碎片化很难部署移动广告活动，但使用 VAST 和 VPAID，广告商可以更容易地进入移动视频领域。为了了解当前移动视频的前景，请看图 7-15 中 eMarketer 的图表。
图 7-15。2011 年至 2016 年全球移动视频观众预测(来源:eMarketer.com)
这显示了相当惊人的增长，使用 IAB 的标准交付格式，如 VAST，广告商可以向每个支持 VAST 标签格式的视频播放器交付跨屏幕视频。目前包括 YouTube、VEVO、震颤和 Adap.tv 等，其采用率正在迅速增长。这在桌面和移动上都适用，由于 iOS 不支持 Flash，如果你正在部署到移动设备，你绝对需要开始使用 HTML5 视频。
还应注意，所有视频都在电话设备的本机播放器中播放。使用 CSS 和 JavaScript 来样式化和控制播放器控件不可能发生在移动设备上，除非它在平板设备上内嵌播放。在为移动设备部署时，以下内容应该会让您对视频规范有一个很好的了解:
- 格式:H.264/MP4
- 分辨率:480x360 或 640x360
- 视频时长:15 至 30 秒
- 视频比特率:600k 至 1024 kbps 或更快
- 音频:64k 到 128k @ 44.1kHz 或更快
- 帧速率:24 或 30 帧/秒
- 文件大小:2.2MB 或更小，除非使用流式传输
HTML5 音频
我刚刚详尽地回顾了 HTML5 视频领域，概述了许多可以利用的特性，但也回顾了一些问题。如你所知，没有音频，视频什么都不是，最后在 HTML5 中，音频现在是浏览器的原生功能。很长一段时间，你需要依赖插件或应用在浏览器环境中回放音频，就像视频一样。在接下来的几节中，我将回顾如何使用 HTML5 和 JavaScript 加载音频并与之交互；我还将讨论浏览器不支持 HTML5 时的故障转移，以及目前市场上的支持。我将关注满足所有浏览器所需的不同音频格式。看完前面几节，理解 HTML5 中的音频会容易很多。我先解决了最难的部分，你不高兴吗？
音频标签
HTML5 的新标签是音频标签，就像视频一样，音频在 HTML5 兼容的浏览器中成为一等公民，有许多很好的特性可以利用。让我们通过查看一些代码来深入研究 HTML5 中的新音频元素，以使其工作(参见清单 7-11 )。一定要注意源标签，以满足不同的浏览器环境。
清单 7-11。 HTML5 音频示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<audio controls>
<source src="sampleAudioFile.mp3" type="audio/mpeg" />
<source src=" sampleAudioFile.ogg" type="audio/ogg" /> <!—Support Old FireFox -->
<object type="application/x-shockwave-flash" width="250" height="50">
<param name="movie" value="sampleAudioPlayer.swf" />
<param name="FlashVars" value="mp3=sampleAudioFile.mp3" />
<embed href="sampleAudioPlayer.swf" width="200" height="20" name="movie" type="application/x-shockwave-flash" flashvars="sampleAudioFile.mp3"></embed>
</object>
</audio>
</html>
让我们看看前面的代码。首先添加属性控件，正如您从视频部分所了解的，它允许用户看到浏览器对元素的本地控件。对于音频，它看起来像图 7-16 。
图 7-16。html 5 中带控件的音频元素
请记住，您可以像处理视频标签一样处理控件。在示例中，我相信您会同意它看起来非常类似于视频实现，为旧浏览器提供了快速回切，并包括多个音频文件，以支持需要不同音频编解码器和格式的所有浏览器。
音频格式和编解码器
让我们来谈谈在开发利用音频的广告时，您最有可能遇到的不同编解码器。音频比视频稍微简单一点，因为就视觉完整性而言，需要考虑的要少得多；然而，音频仍然必须清晰，并为网络正确压缩。你在下一个活动中瞄准的大多数浏览器都支持表 7-1 中概述的格式。
表 7-1 。HTML5 音频格式和浏览器支持
| 浏览器 | 版本 | 多媒体数字信号编解码器 |
|---|---|---|
| 微软公司出品的 web 浏览器 | 9+ | MP3，AAC |
| 铬 | 9+ | OGG、MP3、WAV |
| 火狐浏览器 | 4+ | 奥格，威 |
| 旅行队 | 5+ | MP3，AAC，WAV |
| 歌剧 | 10+ | 奥格，威 |
| 机器人 | 2.3+ | 设备相关 |
| 移动旅行 | 3+ | MP3，AAC |
| 黑莓 | 6+ | MP3，AAC |
正如您从表 7-1 中看到的，音频支持相当分散，因此如果您打算在活动中使用多个浏览器，请确保包含多个音频源。您可能还希望将音频流式传输到您的广告中，并且您需要依靠前面讨论的一种自适应流式传输技术。唯一的区别是，你不使用 MP4 或另一个视频文件，你会包括你的音频文件，并相应地调整比特率设置。最后要注意的是，为不支持音频标签的浏览器提供回切是很重要的，所以利用 Flash 或 Silverlight 等插件来处理这一点。
注意我将在第十二章中讨论 HTML5 音频的更多新兴特性，包括网络音频 API。
音频工具
如果您需要将音频文件转换成以前的格式以支持多浏览器，网上有许多免费服务。例如，如果你打算转换成所有以前的音频格式(OGG、WAV、AAC 和 MP3)，我建议你去 audio.online-convert.com 看看，在那里你可以转换成这些格式和许多其他格式。
音频 JavaScript API
正如您可能已经猜到的，您可以像在视频中一样使用 JavaScript 来控制音频回放。如果你正在为浏览器的内部播放器定制你自己的控制，这是非常有用的。因为您可能要重新创建播放/暂停和音频开/关的定制按钮，所以您需要利用 JavaScript API 来添加事件和检查格式。清单 7-12 展示了前一个例子，在这里我将展示如何使用 JavaScript 来构建它们，而不是使用浏览器的默认控件。
清单 7-12。 HTML5 音频 JavaScript 示例
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button onClick="handleEvent(this);">Play Audio</button>
<button onClick="handleEvent(this);">Pause Audio</button>
<button onClick="handleEvent(this);">Audio On</button>
<button onClick="handleEvent(this);">Audio Off</button>
</body>
<script>
var player = new Audio ();
if (document.createElement('audio').canPlayType('audio/ogg')) {
//play ogg file
player.src = 'someAudioFile.ogg';
} else if (document.createElement('audio').canPlayType('audio/mpeg')) {
//play mp3 file
player.src = 'someAudioFile.mp3';
} else if (document.createElement('audio').canPlayType('audio/mp4')) {
//play aac file
player.src = 'someAudioFile.aac';
} else {
//Flash or Silverlight failover
}
function handleEvent (event) {
var t = event.textContent;
switch (t) {
case 'Play Audio' :
player.play();
break;
case 'Pause Audio' :
player.pause();
break;
case 'Audio On' :
player.volume=1;
break;
case 'Audio Off' :
player.volume=0;
break;
}
console.log(t);
}
</script>
</html>
从示例中可以看出，您从 HTML 标记中删除了音频元素，并将其添加到 JavaScript 中。你要做的第一件事是创建按钮来切换你的音频播放/暂停和声音开/关。接下来进入 JavaScript，通过编写 var player = new Audio()行创建一个新的音频对象；。在那里，您检查浏览器可以回放哪种音频格式。在这个条件检查中，您使用 canPlayType 方法来确定它是 OGG、MP3 还是 AAC。一旦确定了浏览器可以播放的内容，就可以通过编写 player.src = 'someAudioFile '来指定您转换为播放器的 source 属性的特定音频格式。从那里，您可以通过单击 Play Audio 按钮开始，该按钮贯穿名为 handleEvent 的 case 语句。最后，通过将 play()或 pause()方法附加到 player 对象，以及将音量调整为 1 或 0，来处理所有特定的事件。给自己一个机会吧！此外，通过访问caniuse.com/#feat=audio，了解新兴浏览器及其对音频标签的支持。
术语回顾
我在这一章中介绍了很多新的术语和缩略语。为了更好地为您提供快速参考，我将详细概述一些我已经触及的内容；参见表 7-2 。
表 7-2 。HTML5 媒体术语回顾
| 单词 | 定义或含义 |
|---|---|
| 编码 | 这是根据不同的回放规范为输出准备一个视频项目。 |
| 转码 | 这是根据不同的播放规范，从一种格式到另一种格式的转换过程。 |
| CBR | 这是编解码器的输出比特率数据应该设置的速率，它是一个常量值。 |
| 可变码率 | 这改变了每个时间段要消耗的输出数据量。VBR 允许在复杂场景中使用较高的比特率，在不太复杂的场景中使用较低的比特率。 |
| 比特率 | 这是每单位回放时间用于表示音频或视频的位数。 |
| 英国制药学会会员 | 这是一秒钟内渲染到屏幕上的视频帧数。 |
| 纵横比 | 这是视频或图像的宽度和高度之间的比例关系；通常是 16:9 或 4:3，但也存在其他比例。 |
| 多媒体数字信号编解码器 | 这是一种能够对数字数据进行编码或解码的设备或软件。 |
| 大老党 | 这是编码视频文件中的一组连续图片。 |
| 阿尔法通道 | 这是为透明度信息保留的像素数据。这通常用于在彼此之上叠加或合成图形。 |
摘要
我们正处于行业的一个巨大转折点，在线音频和视频交付比以往任何时候都更加混乱和重要。客户希望他们制作的视频能够以最佳的质量和清晰的音频传送到每一个屏幕上，而用户希望快速启动的视频质量好，播放时不会出现停顿。然而，由于只有特定的视频格式才能在特定的浏览器、操作系统和设备上播放得很好，因此创建一个无处不在的高质量跨屏幕体验是一项挑战，而且通常非常耗时。
本章涵盖了很多内容，但重要的是要理解大环境，并理解创建、交付和优化网络视频和音频的所有活动部分，尤其是使用 HTML5 的在线广告。如果你使用的是质量低劣的视频资源和用户甚至无法播放的交付机制，你的潜在客户就不会给你时间。如果您的下一个活动需要某种形式的媒体，我建议您回顾一下这一章，这样您就可以确保了解视频创建、压缩和交付的整个流程。但更重要的是，确保你的客户理解。视频，像目前网络上的许多东西一样，是超级碎片化的，但这个过程变得越来越容易处理，你会牢牢抓住竞争，因为你现在正在处理它。不要害怕在下一次广告活动中使用 HTML5 视频，并寻找与 VAST 和 VPAID 的集成点，以帮助加快您的活动需求。这将确保你的视频可以跨媒体购买，而我介绍的技术将确保它可以跨浏览器和设备。尝试不同的压缩技术，并开始熟悉使用 JavaScript APIs。此外，确保在不同的网络条件下，在不同的设备上测试您的创意和视频，包括移动设备、平板电脑和操作系统。如果在时间紧迫的情况下很难将所有事情都考虑进去，请记住我提到的帮助你快速开始的在线服务。
本书接下来的几章是关于移动设备的，我会在这几章中更多地讨论视频。把你在这里学到的东西应用到未来。
八、移动网络广告
我认为可以肯定地说，移动和平板电脑市场推动了 HTML5 的出现。苹果发布 iPhone 和 iPad 的唯一原因是它们都不支持 Flash 播放器，这使得 HTML5 成为一个家喻户晓的名字和推动移动领域发展的必要技术。本章将重点关注 HTML5 广告，因为它与不断增长、不断变化且略微分散的移动领域相关。在我写作时，移动市场充斥着各种浏览器、设备和操作系统，更不用说支持不同 HTML5 的各种浏览器和操作系统的几个版本了。市场实际上是相当分散的，至少可以这么说，但不要担心，我一定会引导你通过这一切。
到目前为止，焦点一直集中在 HTML5 的功能上，因为它们或多或少与桌面有关，但移动设备的功能使 HTML5 的优势更加突出。通过使用 API，您可以利用原生设备功能，如触摸、方向、指南针、加速度计和电池状态，更不用说 HTML5 为桌面浏览器带来的所有新功能，这些功能也可以渗透到移动领域。面对现实吧，我们现在生活在一个移动的世界。由于可以上网的智能设备，人们可以在飞机上用手机登记登机牌，进行电子支付，甚至可以通过优步这样的服务叫出租车。因此，让我们来谈谈移动开发如何将 HTML5 推进一步，并具体谈谈设备功能、它们的使用方式、当前支持的内容以及即将推出的内容。由于移动设备和桌面浏览器使用 HTML5 有很大不同，本章将概述 HTML5 可以访问的当前设备功能，并重点介绍如何使用这些功能为我们的客户创建真正令人惊叹的广告。如果广告商希望在手机和平板电脑上接触到他们的观众，他们肯定需要依靠 HTML5 向前发展。移动市场为许多创新的事物提供了入口；所以让我们深入研究，找出到底是什么。
移动世界
让我们搞清楚一件事:移动技术已经出现，相信我，它会一直存在下去！越来越多的人配备了带有网络连接的智能手机和平板电脑。硬件的制造成本比以往任何时候都低，随着苹果、三星、LG 和其他 OEM(原始设备制造商)以相对较小的价格创造出非常复杂和互联的设备，日常消费者的进入门槛已经降低，这使其成为一个高利润的广告渠道。这些设备在许多方面都很复杂，但其中一个需要关注的是现代浏览器对 HTML5 的支持。因为社交、工作、收发电子邮件或只是在旅途中玩游戏比以往任何时候都更容易，而且随着如此多的眼球从传统的桌面和电视转向更小的屏幕，广告商已经注意到了这一趋势，并渴望进入这个新兴市场。许多分析师预测，移动市场将在未来两三年内超过标准桌面市场。例如，看看摩根士丹利研究公司 ?? 的图 8-1 。
图 8-1。2013-2015 年移动互联网用户和桌面用户预测(来源:摩根士丹利研究)
正如您所看到的，对于移动领域的任何人来说，这都是一个激动人心的趋势，为长期繁荣的未来提供了机会。有一点是肯定的:HTML5 将在这个市场上非常突出，因为它是目前唯一可以跨越所有移动平台的无处不在的技术。没有其他技术可以部署到所有的浏览器和设备上——无论是 Flash 还是 Silverlight。除非你知道 Objective-C 或 Java，或者使用 Adobe AIR for iOS 或类似的打包程序，否则你肯定无法为主流移动操作系统构建应用。HTML5 不仅允许你构建令人惊叹的网络应用；它甚至可以在像 PhoneGap(phonegap.com)这样的框架的帮助下，在阿帕奇·科尔多瓦(incubator.apache.org/cordova)上创建本地移动应用。使用在现代网络浏览器中工作的相同工具和语法，现在可以跨设备、浏览器和各种操作系统使用，以确保编译到本机应用时的兼容性。这是 HTML5 在移动设备上变得如此有吸引力的主要原因。您可以构建一次，然后在任何地方部署(目前支持任何地方)。既然您已经知道了 HTML5 为什么如此重要，那么在深入研究每种设备的代码和实践之前，让我们来看看市场上的各种设备。
移动设备、浏览器和操作系统
桌面浏览器对 HTML5 的支持是分散的，移动设备也不例外。有许多不同的设备制造商，每个都有自己的变化，并在其浏览器中采用 HTML5 规范。目前该领域有如此多的不同设备，以至于几乎不可能跟踪在哪里支持什么，以及我们可以访问的设备的最新功能是什么。
注意关于碎片化移动生态系统的非常好的信息，我强烈建议去看看
www.quirksmode.org/mobile/。
接下来的几节将讨论撰写本文时市场上的顶级设备，我们还将回顾一些随时可能出现的新兴竞争对手。有各种不同的屏幕尺寸和操作系统，数以吨计的浏览器版本，以及数以百计的设备模型，广告单元都必须在其上显示。接下来的几个部分将帮助你浏览风景并理解它。
苹果 iOS
当苹果在 2007 年推出 iPhone 时，智能手机市场真的起飞了。从那以后，手机的外观就再也不一样了，用户已经习惯了手持设备上丰富的触摸功能。多年来，苹果经历了多次硬件和软件迭代；开发人员和用户从更快的硬件、更多的设备 API 和整体性能提升中受益匪浅。例如，随着 iOS 6 的最新发布，用户可以从网络浏览器访问相机和照片库，并利用一种称为网络音频 API 的新功能(更多信息请参见第十二章)。对于开发人员来说，iOS 提供了一个很好的开发环境，有丰富的工具和模拟器来测试本地应用和 web 内容。就开发者和广告支出而言，苹果几乎是智能手机市场的王者，尽管其主要竞争对手谷歌在全球范围内拥有更大的用户群。JiWire(【www.jiwire.com/insights】??… 年的结果显示，iOS 在广告方面的市场份额最大。
这些信息表明了一些事情，其中之一是广告商似乎喜欢在 iOS 市场开发内容，因为这是一个结构化的环境，而 Android 则因为其开放性而更加分散。第二件事是，这可能意味着更多的人在 iOS 设备上观看带有广告支持模式的在线内容和应用。无论你从哪个角度看，这些数字都不会说谎。
Google Android
谷歌坚信开源，并通过其移动操作系统 Android 坚守这一信念。Android 是目前移动领域最大的操作系统，安装在各种设备上。在这种情况下，开放既是一件好事，也是一件坏事。它创造了大量的创新和竞争，但反过来，也给需要在这种环境下进行开发的开发者带来了很多挫折。由于有超过 2，000 种不同的 Android 产品(并且还在增长)，开发人员面临着浏览器中不同级别的 HTML5 合规性、不同的屏幕分辨率、不同的像素密度，甚至是传统的 Flash Player 支持。但随着 Android 4.1 的全面采用，Flash Player 支持将正式消失。访问 opensignalmaps.com/reports/fra… Android 的开发是多么的分散和混乱。你可能会发现这项研究的结果令人震惊！正如这项研究所说，用三星或 HTC 设备测试和开发内容是最有意义的，因为它们是当今市场上最突出的产品。然而，如果你是一名开发人员，你就无法逃避为 Android 设备进行开发。由于大多数手机和平板电脑市场都使用这种操作系统的版本，广告商更有理由希望出现在他们的屏幕上。
其他人
市场上的其他一些设备有 Galaxy 平板电脑、黑莓 Playbook、Nooks 和 Kindles，所有这些设备都支持各种 Android 操作系统的混合，只有 Playbook 例外，它使用黑莓自己的平板电脑操作系统。据说，截至 2012 年 4 月，亚马逊的 Kindle Fire 拥有美国 54.4%的安卓平板电脑，这一事实证明了为该设备创建正确显示和工作的内容的合理性。这些设备中的大多数都提供非常符合 HTML5 的浏览器，大多数操作系统都有频繁的更新。(你可以在 html5test.com 查看这些结果。)其他开源浏览器和平台正在开发中，其中包括 ti Zen(【tizen.org】)据说在这项研究期间拥有最好的 HTML5 兼容浏览器之一(it world . com/mobile-wireless/262120/ti Zen-pops-html 5-winner)。最终，移动世界可能真的会变得支离破碎，但支持在这些设备上做广告仍然是必要的，因此请确保与您的客户讨论他们希望在活动的分配时间和预算内瞄准哪些操作系统平台。如果您一开始就知道您的客户想要的目标，这可以节省您几个小时甚至几天的开发和调试时间。
移动广告
您已经看到，HTML5 是在兼容桌面的浏览器中构建和交付广告的标准；现在，让我们更深入地了解这是如何影响移动领域的。使用 HTML5 的广告提供了广告内容和页面内容之间的无缝集成，尤其是在移动设备中不支持 iFrames 的情况下。随着广告真正成为页面的一部分，网络和广告开发者有能力做一些令人惊讶的事情。但这对他们来说也是相当具有破坏性的，因此他们需要紧密合作来完成复杂的富媒体执行。由于 HTML5 目前的接受状态，无法保证 HTML5 构建的广告能够在移动生态系统中的所有浏览器和操作系统上同等呈现。web 设计人员和开发人员为确保每个像素和功能在不同浏览器间都正确而经历的同样的问题和测试在这里也同样适用。在接下来的章节中，让我们回顾一下移动广告是如何被购买、销售、创建、服务和分析的。
众所周知，移动广告行业正在蓬勃发展，而且短期内不会放缓。如果你是移动广告的新手，你很快就会发现移动广告是独一无二的；从桌面过渡的开发人员和设计人员有他们的工作要做。移动是一个新兴的有利可图的行业，但在我们像在桌面创作中一样得心应手之前，还有很多东西要学习和解决。事实上，一整本书都可以专门讨论这个话题。所有购买、销售、创建、提供和分析广告的方式仍处于发展阶段，但随着市场上有如此多的手机和平板电脑，广告商希望他们的活动能够覆盖最广泛的范围。通常，巨大的牺牲来自运营规模和周转时间，因为开发需要编写许多条件和功能检测，以便广告可以有效和正确地跨屏幕部署，同时也可以优雅地失败。移动广告市场仍处于起步阶段，但增长迅速。为了证明这一点，请看图 8-2(??)，其中有来自 eMarketer 的关于全球在线广告支出的数据。
图 8-2。按形式划分的全球在线广告总支出(来源:【eMarketer.com】??
如果你正在寻找一个职业改变，甚至只是一个新的爱好，这是一个很好的行业！预计到 2016 年，全球移动广告支出将会有最大的百分比增长。然而，在你能把它想成所有的乐趣和利润之前，有许多事情要涵盖。让我们从移动广告定价开始。
移动定价
移动广告定价与桌面广告非常相似，因为广告通常是根据印象计费的；即，广告被呈现到页面或被请求的次数。传统上，移动富媒体是按 CPM 计费的(即，按每一千次展示计费)。这也可以与可视印象相结合——当广告实际出现在用户的机器上时。通常，该指标有助于呈现“折叠线以下”的广告，当用户访问页面时，该区域不在初始视图中。点击或点击是用户触摸横幅以扩展它的次数，CTR(点击率)——在移动设备中应该称为 TTR(点击率)——是广告被点击的总次数除以提供的广告展示次数。例如，如果一个广告被播放 1000 次，被点击 10 次，那么它的点击率为 1.0%。最后，费用由所报告的时间段内支付的总金额以及可能的基于所提供的展示总数的账单来分解。在mymobileagency . co . uk/blog/mobile-advertising-pricing-explained . html有一个很好的、非常详细的移动广告定价分类。
广告创作
既然你已经了解了移动广告的定价，让我们来深入探讨一下手头更大的话题，也就是广告的创意设计和开发。对于移动设备，最好将所有广告的样式表放在发布者页面的头部或 iFrame 的头部，如果是这样的话(你的发布者会告诉你你的广告将如何呈现在页面上)。
注意旧设备浏览器中的 iFrame 广告会导致系统内存问题，尤其是当它们嵌套在一起的时候。随着新设备的出现，这变得不那么令人担忧了，但在定义您的活动范围时，请记住这一点。
样式不应该包含在其他任何地方，因为在创建元素后应用它们会导致回流、重画和不必要的(和不必要的)非样式内容闪烁。当包含特定于您的广告的 CSS 时，请确保在缩小和压缩时将所有 CSS 文件捆绑到一个文件中。在移动领域，请求越少越好，因为网络条件可能会有很大的变化。我推荐使用 CSSCompressor 、【csscompressor.com】和 js compress(jscompress.com)，因为缩小或压缩代码会减少整体文件大小——这对移动设备来说超级重要。对于依赖于元素的脚本，让它们在 DOM“就绪”或“加载”之后执行——这是通过使用 DOMContentLoaded 或“加载”事件来完成的。
此外，如果您需要依赖图像素材，您应该尽可能预加载；预加载在将任何广告内容呈现到屏幕之前提供完整的广告体验。虽然图像在移动世界中很重要，但你不能总是不使用它们，所以一定要像我们在第五章学到的那样使用精灵表。这样，当用户最终看到内容时，您可以确信内容是可操作的和可见的。清单 8-1 展示了预加载图像素材的常用技术。
清单 8-1。 JavaScript 图像预加载器
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var images = new Array();
var numImages = '3';
var count;
function preloading () {
for (i = 0; i < preloading.arguments.length; i++){
images[i] = new Image();
images[i].src = preloading.arguments[i];
count = i+1;
if(count.toString() === numImages) {
//initialize ad
console.log('adInit');
}
}
}
preloading(
"image1.gif",
"image2.gif",
"image3.gif"
);
</script>
</head>
<body>
</body>
</html>
正如您所看到的，正在建立一个名为 images 的数组对象。接下来，让我们创建一个名为 preloading 的函数，该函数将传递一组图像素材，循环遍历并从中创建新的图像对象，并将它们的源属性分配给函数中提供的文件路径。最后，加载图像时可以调用任何其他需要的东西，比如启动广告的 init 函数。
除了预加载外部内容之外，您还应该优先加载特定的素材。如果您正在利用脚本将依赖的外部 JavaScript 库，那么排序是强制性的。幸运的是，您可以利用两个新的脚本标记属性 Async 和 Defer 来更好地帮助发布者进行代码排序。延迟脚本是依赖于其他脚本的脚本，比如外部库。因此，如果您绝对需要在移动活动中使用 jQuery 和其他相关脚本，那么您应该推迟使用它们。
注意延迟脚本在 DOMContentLoaded 事件之前执行。
广告服务器的 JavaScript 广告标签应该使用异步属性,这样发布者页面的加载速度会更快。Async 适用于加载后立即执行的脚本，不需要依赖其他脚本——它们非常适用于广告标签、社交网络小工具和网站上其他第三方内容，这些内容与网站内容没有明确的联系。这两个新属性的真正好处是它们不会阻塞 HTML 解析器，否则会阻塞用户的重要 UI(用户界面)元素。让我们看一下清单 8-2 ，它概述了 defer 和 async 属性的使用。
清单 8-2。 JavaScript 延迟示例
<html>
<head>
<script defer src='jquery.js'></script>
<script defer src='mainSiteScript.js'></script>
<script async src='adTag.js'></script>
</head>
</html>
您可以看到，首先加载的是 jquery.js 脚本，使用的是 defer 设置，然后是 mainSiteScript.js，它依赖于 jquery 库。最后，为我们的广告内容调用第三方 JavaScript 标记，它不依赖于发布者内容。由于在移动设备上解析 JavaScript 可能需要几毫秒的时间，这取决于网络连接，所以保持网站对用户的功能并在主要内容加载后加载广告是很重要的。
在开始 HTML5 活动和开始创意开发之前，请始终询问您的广告运营或活动经理标签将在哪里运行。什么设备，浏览器，等等。定义你的范围；这将决定整体功能，因为对某些功能的支持是有限的。创意所需的功能将决定跨浏览器/设备构建的开发时间。在 media.admob.com 的 HTML5 中有一个非常全面的关于移动广告开发的概要。
考虑到这一点，我们先来讨论一下移动中的视口*。*视窗实际上是浏览器在移动设备上呈现内容的虚拟窗口。通过在文档页面的头部使用 meta 标签，您可以指定宽度、比例和用户可伸缩性，甚至设置浏览器窗口要解释的最小和最大值。由于这对于在移动设备上正确格式化内容非常重要，让我们看看清单 8-3 ，它显示了浏览器窗口被设置为访问其内容的设备的屏幕大小。
清单 8-3。 视口移动元标签
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "width=device-width">
</head>
当您在移动浏览器中打开此文档时，您会注意到浏览器中的任何内容都已被设置为设备的宽度。对于苹果 iPhone，这将是 320 CSS 像素宽；Kindle Fire 的像素是 600 CSS。这种可变宽度是一个很好的特性。由于它使浏览器看起来像是设备的原生应用，这是广告应该考虑的事情，因为大多数发布者页面都会包含这些元标签。清单 8-4 通过设置比例值和用户输入显示了一个更精细的视口示例。
清单 8-4。 用视口元标签设置比例
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
</head>
这也可以通过使用 JavaScript 文件中包含的 JavaScript 方法来实现(见清单 8-5 )。
清单 8-5。 用 JavaScript 设置视口宽度和比例
var viewMeta=document.createElement('meta');
viewMeta.name='viewport';appleMeta.content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0';
document.getElementsByTagName('head')[0].appendChild(viewMeta);
当在浏览器中查看时，这些代码示例都将页面内容的宽度设置为设备的屏幕宽度，将初始、最小和最大缩放级别设置为 100%，并且不允许用户使用收缩手势放大页面内容。这些信息对于希望为移动访问者实现最佳呈现的内容所有者至关重要，尤其是那些想要模仿为 Web 构建的本地应用的内容所有者。关于广告商、代理商和广告服务器——同样，当向专门设置了此视窗的页面投放广告时，这是需要注意的事情，因为你的创意可能会受到影响。创意元素可以根据比例设置放大或缩小，这可能会创建难以辨认或更糟的副本或图像，或者如果出版商使内容比广告预期的更窄，则会对广告的宽度进行不必要的更改。
媒体查询和像素密度和
当调整视窗时，您很可能会希望利用 CSS 媒体查询来进行移动广告创意。您可能不知道将访问媒体页上您的广告内容的每一个设备，因此您必须制作一个响应迅速并适应查看它的设备的广告。响应式广告设计需要大量的工作和清晰的执行计划，但如果做得正确，可以节省大量的时间。由于许多设备有不同的屏幕尺寸和像素密度，广告设计师越来越难以处理创意构建中的所有差异。因为这是为各种尺寸和密度的移动设备开发的设计师的一个问题，所以 Teehan+Lax 的人开发了一个漂亮的图形和图表(teehanlax.com/blog/density-converter)来帮助你为各种像素密度的屏幕设计内容(见图 8-3 )。
图 8-3。缩放各种像素密度的屏幕内容
在撰写本文时，苹果设备的像素密度为 1.0 和 2.0；Android 有各种其他版本，包括 1.4、1.75 和 2.3。例如，iPhone 4 及以上支持更高的像素密度——苹果称之为视网膜显示器。在这些设备上，宽度仍然是 320 CSS 像素，但设备的像素每像素翻倍，以创建更高的图像保真度。例如，300 × 250 的图像需要 600 × 500 的图像才能在这些更高像素密度的显示器上看起来清晰(有关此主题的更多信息，请参见quirks mode . org/blog/archives/2010/04/a _ pixel _ is _ not . html)。通过阅读这篇文章，你会明白这个故事的寓意是 CSS 像素与实际的物理设备像素没有什么关系。因此，应该尽可能地使用它们，因为不管设备的底层分辨率如何，它们在各种浏览器中的解释都是一致的。清单 8-6 展示了如何使用 CSS 处理更高像素密度的图像。(写这样的东西不要觉得不舒服。)
***清单 8-6。***CSS 中双倍像素密度示例
<style>
.adContainer {
background-image: url(bg_600x500.jpg);
width: 300px;
height: 250px;
}
</style>
正如您所看到的，代码示例将背景图像的大小增加了一倍，以弥补额外的设备像素。我知道这会让你很困惑！但是，现在已经有了正在开发的规范，甚至可以使用特定的厂商前缀特性。有关更多信息，请阅读 CSS 中的图像集属性(blog . cloud four . com/safari-6-and-chrome-21-add-Image-Set-to-support-retina-images)以及备受期待的新兴图片元素规范(【github.com/scottjehl/p…
移动提示
现在，您已经设置好了 viewport 和 CSS，让我们来讨论一些关于使用各种移动设备的重要“问题”。接下来的部分将会帮助你处理移动广告开发中一些常见的陷阱。客户经常会要求去掉设备的灰色轮廓。这个轮廓在移动 Safari 上看起来像一个灰色的点击区域，在 Android 设备上看起来像一个琥珀色或绿色的区域。参见图 8-4 了解该问题的图示。
图 8-4。某些移动设备上的触摸轮廓
如果你想去掉这个大纲，这里有一些代码演示了如何使用 CSS 做到这一点。
button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline: none;
}
注意我们是如何将前缀 webkit-tap-highlight-color 的 RGBA 标度设置为 0，并将其命名为透明的。最后，为了安全起见，我们将大纲设置为 none 来禁用它。
CSS 和 mobile 的另一个有用的特性是禁用选择。如果您或您的客户希望在广告单元中禁用剪切、复制和粘贴操作，您可以使用 CSS 来实现这一点。图 8-5 描绘了复制粘贴过程在手机上的样子。
图 8-5。移动设备上的复制粘贴技术
如果您希望禁止用户从 ad 单元获取信息，禁用此功能可能会很有用。也许是及时和动态的数据或一次性优惠券交易。无论哪种方式，只要确定您真的想要为您的用户群禁用此设置。这里有一个 CSS 片段可以实现这个结果。
p {
-webkit-user-select: none;
}
有时，当用户点击图像并按住它或按住内容中的链接时，您可能会收到在 iOS 设备上禁用标注窗口的请求。图 8-6 更好地说明了我所说的。
图 8-6。iOS 上的标注气球
默认情况下，当用户点击图像或 URL 并按下一段时间时，操作系统会提供一个菜单项列表供用户选择。如果这不是您的广告体验的一部分，CSS 可以删除本机标注窗口。
img, a {
-webkit-touch-callout: none;
}
在前面的代码中，只需将名为 touch-callout 的 Webkit 属性设置为 none，就可以禁用该操作系统标注功能。
通常，您希望为用户提供特定的输入，而不是传统的文本输入键盘。这对于在表单中输入数字数据(电话号码、邮政编码)非常有用。为了更改表单输入上的这些键盘显示，请在输入标记上指定 input-type 属性。例如，在图 8-7 中，我用模式[0–9]*将输入字段设置为 tel，因为我希望用户输入邮政编码。有点令人困惑，但它是有效的，因为 ZIP 没有输入类型(至少现在还没有)，我所关心的是这个特定输入的数字条目。
图 8-7。移动设备上的“tel”键盘输入
正如您所看到的，当用户将焦点放在输入字段上时，设备的数字键盘就会出现。这里有一些代码可以用来切换键盘，以获得更好的用户体验。
注意如果输入类型不受支持，浏览器将默认为“文本”类型的通用输入
<!-- display a standard keyboard -->
<input type="text" />
<!-- display a telephone keypad -->
<input type="tel" />
<!-- display a URL keyboard -->
<input type="url" />
<!-- display an email keyboard -->
<input type="email" />
<!-- display a numeric keyboard on iOS -->
<input type="tel" pattern="[0–9]*" />
使用这些代码片段，您可以根据自己的创作目标为用户显示所有类型的输入字段。让这变得非常简单和有用的是，浏览器会为您处理这一切。您不需要构建和定制特定的输入字段。
另一件有趣的事情是字体平滑属性。在你的创意中经常会有一些动画，有时会涉及到复制元素的动画。图 8-8 展示了“o”字符的字体平滑效果。
图 8-8。CSS 字体平滑属性的效果
有些动画可能涉及复制或文本元素，有一个很棒 CSS 片段可以防止字体上出现锯齿或脊状动画。这里有一些代码提供复制元素的反走样。
.smoothCopy {
font-smooth:always;
}
注在撰写本文时，字体平滑功能仅在 Webkit 浏览器中可用。它不是任何 web 标准规范的一部分。
除此之外，移动广告和基于 CSS 的网络字体也是一个潜在的大问题。一方面，广告商和品牌将希望使用他们实际的字体，因为它们通常是他们品牌身份的核心——想想可口可乐或百威啤酒——而唯一的方法就是增加 CSS 字体或透明 PNG 图像的 k 权重。另一方面，CSS3 字体的负载导致最终用户的下载时间更长，并且各种格式需要更多的 HTTP 请求。这种情况没有灵丹妙药；有些客户绝对会要求你使用他们的品牌字体。最好的做法是向客户表明，做它想做的事情会让用户付出代价。他们的体验可能会受到影响，尤其是在低带宽连接上。如果客户坚持，有一些非常好的优化字体库可以使用:谷歌的网络字体库(www.google.com/webfonts)、Adobe 的 Typekit(typekit.com/)和 WebType(www.webtype.com/)，正如你在第五章中所了解的，这些字体库只带来设备所需的格式。权衡使用或不使用的利弊，也考虑透明的 PNG 文件。然而，当复制需要改变或者是动态的时，png 不是一个选项。对于 iOS 设备上的默认字体支持，请查看iosfonts.com。Android 用户对默认字体的选择要有限得多——Droid Sans、Droid Sans Mono、Droid Serif 和 Roboto——但希望随着操作系统的未来更新，会有更多的选择。
注意这些只是一些问题和解决方法。还有很多，但是考虑到所有正在使用的设备和浏览器，把它们都列出来超出了本书的范围。更多移动 CSS 调整见
css-infos.net。
正如你可能已经猜到的，许多移动广告来自于桌面广告。调查、“发送给朋友”、优惠券下载、客户数据收集、动画、应用商店的直接链接、地图、视频、投票、互动、广告内购买和基于位置的交易等广告功能都是可能的，但它们可能需要更多的理解才能完美地跨设备实现。这些功能确实能让广告主受益；他们可以利用从桌面营销活动中学到的东西，并将其应用到移动设备中，或者重新定位他们的营销活动，以获得更适合移动设备的功能。这是迄今为止不一样的媒体，但在功能方面，很多相同的事情和更多的可以完成。业界的一个大问题是如何处理素材，因为它们不仅仅是 SWF 文件。这适用于移动广告，也适用于 HTML5 广告。以下是在内部和外部团队成员之间处理或移交创意素材时需要注意的事项。
- 超文本标记语言
- 半铸钢ˌ钢性铸铁(Cast Semi-Steel)
- Java Script 语言
- 分层 PSD 和/或带有子画面的图像
- Illustrator 文件
- 情节串连图板
- 字体
- 媒体文件(视频/音频)(如果需要)
- 自述文本文件，概述了素材的说明。
所有这些素材可能会以 ZIP 文件的形式提供给您，这可以确保所有素材在整个转移过程中保持在一起。当需要移交素材时，确认所有这些文件都存在可以避免后续的混乱。这种混乱往往会消耗宝贵的时间，并可能会破坏活动的启动。
营销活动通常要求您将数据 ping 到第三方服务器，尤其是当其他供应商为验证跟踪指标而向您提供 1 × 1 数据时。这可以通过在 JavaScript 中创建一个新的图像对象并应用图像的源属性来指向你希望的第三方目的地来实现(见清单 8-7 )。
清单 8-7。 像素跟踪示例
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id='icon' style='background-color:black; width:50px; height:50px;'></div>
</body>
<script>
var someElement = document.querySelector('#icon');
someElement.addEventListener('touchstart', activityHandler, false);
function activityHandler () {
var img = new Image ();
img.src = 'http://www.tracker.com/ping';
}
</script>
</html>
您可以看到一个事件监听器已经添加到您选择的元素中，当点击时，我们调用 activityHandler 函数。在该函数中，创建了一个新的图像对象 img，并将其提供给要调用的目的地。现在，浏览器将向该源发出请求，接收端将记录一个交互度量。(只要确保在您希望跟踪的用户活动上这样做；否则，您的报告指标将会失真。)此外，请记住，对移动设备使用此功能意味着另一个 HTTP 调用，基于带宽限制，这可能会有偏差。如果没有足够的带宽，第三方的请求可能会失败，但动作仍然会从创意内部发生。
最后，与展示广告一样，移动广告也适用同样的“进/出”规则。如果用户点击或轻触广告来扩大广告，他们很可能需要点击或轻触来结束体验。这或多或少是由发行商的需求决定的，但是在考虑整体用户体验时要记住这一点。
优化
优化是移动开发的关键部分。在移动生态系统中保持轻量级广告应该是任何开发者或设计师的首要关注点，因为这对最终用户可能面临的各种网络连接极其重要。由于图像和脚本在 3G 连接上负担过重，检测这些限制并为用户提供替代体验。在 Android 设备 2.2 及更高版本上，检查 navigator.connection.type 属性；它可以检测来自以太网、2G 或 3G 连接的 WiFi，并相应地调整您的广告。对于黑莓设备，查看 blackberry.network 获取类似信息；在 iOS 上，除非第一方广告服务器可以提供，否则要等到网络信息上的 API 来到那个浏览器。有关网络 API 的更多信息，请参见w3.org/TR/netinfo-api。
在理想情况下，最好的情况是检测用户的当前带宽，并提供替代信息或适当的故障转移。例如，如果用户不在 WiFi 上或连接不好，提供一个简化的创意版本，几乎没有图像和依赖于各种 HTTP 请求的动态内容。连接信息将让广告真正适应用户的设备和观看条件。将此与广告内容的响应性创意设计相结合，您将拥有一个可以在任何条件下在任何屏幕上运行的广告——没问题！这基本上是广告服务的圣杯。
此外，使用 mobile 最好移除所有沉重的、不需要的外部库；尽可能使用直接的本地 JavaScript。库提供了极大的易用性，但是由于这个原因，太多的开发人员依赖于它们。如果内容仅针对一个操作系统或设备，则不保证包含它们。像 jQuery 这样的库提供了令人惊讶的一致的跨浏览器体验，但是如果您只是为了它的动画和语法易用性而使用它，那么您就用额外的重量杀死了最终用户。事实上，在 2012 年的一个版本中，jQuery 压缩了 93 千字节，压缩了 34 千字节。这对移动用户来说是相当大的，尤其是广告内容。始终尝试使用裸 JavaScript，最小化 k-weight，减少网络下载，并且永远不要忘记您应该利用的正常方法，例如缩小脚本和 CSS 文件，以及将您的素材压缩为最小的传输大小。
最后，尽量保持你的浏览器重画非常低。对于移动设备来说，重新绘制 DOM 的布局是一项非常昂贵的任务。随着更多动画和 DOM 操作的出现，重画可能会大大减少用户的电池寿命。
代码执行
在优化之后，另一个重要的实践是代码执行。对于移动广告，代码执行可能是一场噩梦，尤其是在等待页面内容加载时，首先是各种网络条件和移动设备上非移动优化的 web 内容。这实际上是一个序列、检查和扮演交通警察游戏。我的一个同事兼朋友总是称之为“舞蹈”无论您是在对 DOM 元素调用操作之前检查它们是否存在，还是等待 JavaScript 平台和库下载，当您的 ad 标签进入实际环境时，这总是一个调试过程。事实上，这句话总结了在浏览器中处理解释代码执行时的挫败感，尤其是发布者一方无法控制的代码。就像一个新的舞伴，你不知道他们是否会踩你的脚。
在广告领域，发布者的页面内容首先要加载，通常作为一个 onload 事件；则该页面向广告服务器发出请求以请求广告内容。此时，广告填充发布者的页面或指定的 iFrame。广告代码仍然需要加载所有与广告相关的文件——在这种情况下，它可以是 CSS、JavaScript、任何图像、web 字体以及其他任何文件。最后，得到许可后，我们的广告体验就可以开始了。我见过很多这样做的方法，但是不管它是如何完成的，都有很多步骤，特别是对于必须快速执行的广告内容！记住，没有人上网看广告，所以你必须快速渲染，尽可能抓住用户的注意力。您将了解到，最好的网站为广告提供回调以开始加载，甚至异步加载它们的广告脚本。清单 8-8 显示了我自己确保所有元素都被写入页面的方法。
清单 8-8。 DOM 元素检查器示例
<script>
function adChecker () {
if (document.querySelector("#yourLastDOMElement")) {
initAd();
} else {
setTimeout(adChecker,100);
}
}
function initAd () {
//Ad content starts here
}
adChecker();
</script>
从代码中可以看出，正在使用一个名为 adChecker 的函数。它通过一个条件来检查广告代码的最后一个元素是否呈现在页面上。一旦返回 true，就会执行名为 initAd 的函数。它将开启我们的创意。否则，将超时函数设置为 100 毫秒，并再次调用 adChecker 函数。这将反复发生，直到广告的标记完全呈现到文档中。这种一遍又一遍的循环可能是一个昂贵的操作，这就是为什么我说最好的网站提供广告挂钩的回调。它们比这种重复功能效率高得多，尤其是在手机上。
移动站点事件
客户的一个常见要求是能够在移动设备上跟踪网站事件。站点事件是放置在广告商网站上的跟踪标签。当用户查看广告或与广告交互并随后访问广告商的网站时，会触发网站事件度量，从而显示广告可能会使用户在注意到广告后转到广告商的 URL 的 ROI。传统上，网站事件基于 cookie 模型进行跟踪；在一些移动浏览器中，这完全没问题。然而，在 iOS 和 mobile Safari 上，第三方 cookie 被默认禁用，这些设备和浏览器被禁止使用 cookie 方法跟踪站点事件。为了更好地说明这个设置，请看图 8-9 ，它展示了 iOS 上的默认设置。
图 8-9。iOS Safari 上的默认 cookie 设置
如果你依赖移动广告中的 cookie 模式，这种情况会是一个很大的限制。相反，利用 HTML5 的 localStorage 属性将该信息而不是 cookie 放在客户端的浏览器上。清单 8-9 显示了如何使用 JavaScript 在广告代码中实现这一点。
清单 8-9。 某 localStorage 网站事件示例(Ad)
<script>
//iOS Site Events - local storage technique - platform.
function setiOSiteEvent (ad, placement, campaign, publisher) {
var m = new Date().getMonth()
var d = new Date().getDate();
var y = new Date().getFullYear();
var dom = window.location.href;
var timeLoc = m + '/' + d + '/' + y + '&' + dom;
var se = ad + '-' + placement + '-' + campaign + '-' + publisher + timeLoc;
localStorage.setItem('SiteEvent', se);
}
setiOSiteEvent('advertiser', 'placement', 'campaign' , 'publisher');
</script>
如清单 8-9 所示，你可以创建一个名为 setiOSiteEvent 的函数，它获取一些参数，这些参数最终会在广告服务时由广告服务器传入。这些可以是广告客户的名称、位置标识符、活动标识符和发布广告的出版商。接下来，在我们的函数中，声明几个变量——m，d，y——它们在站点事件发生时准确地标记时间戳。接下来，通过编写 var dom = window.location.href 来获取对 URL 位置的引用；—这将给出查看者看到广告的确切页面位置。接下来，调用另一个变量 timeLoc，它代表时间/位置，并获得时间值和位置的串联值，或者 URL 地址。接下来，创建我们的最终 var，称为 se，它获取所有的 ad 服务器值，以及我们的时间戳和位置值。最后，调用我们的 localStorage 对象，并通过 setItem 调用存储该值，将 se 分配给它。这个 localStorage.setItem 调用将把所有的站点事件(se)信息存储到用户的浏览器中，以便广告商的页面以后可以引用它。清单 8-10 展示了如何在广告商的页面上实现这一点。
清单 8-10。 某 localStorage 网站事件示例(广告客户的页面)
function getiOSiteEvent () {
if(localStorage == '' || localStorage == null) {
return;
} else {
//Grab iOS Site Event
console.log(localStorage.getItem('SiteEvent'));
var seCall = new Image();
seCall.src = 'http://tracking.adserver.com?siteevent=' + localStorage.getItem('SiteEvent');
setTimeout(localStorage.clear(), 500);//Clear the information once the metric is reported
}
}
getiOSiteEvent ();
当用户访问广告商的页面时，getiOSiteEvent 函数将被触发。在该功能中，检查用户是否有任何位置存储信息。如果用户没有，就退出该功能；如果用户这样做了，创建一个新的图像(很像我们的第三方跟踪示例),并将其 source 属性设置为跟踪位置。最后，一旦广告服务器获得指标，设置一个超时并清除用户浏览器中的 localStorage，这样我们就不会再跟踪这个值。除了过时的 cookie 方法，还有许多方法可以做到这一点；一般来说，选择取决于你使用的广告服务器和浏览器对客户端存储技术的采用。
移动视频广告
在写这篇文章的时候，最大的移动广告市场是视频——传统的流内或前置视频。正如上一章所展示的，VAST 是 IAB 向视频播放器发送视频广告的行业规范，手机也不例外。移动视频是我们行业中增长最快的市场之一，广告商开始寻求使用前置广告来吸引小屏幕空间中所有眼球的注意力。图 8-10 (来自 eMarketer)估计了 2016 年全球移动视频的使用情况。
图 8-10。2011 年至 2016 年全球移动视频观众估计数
许多网络和出版商在他们的视频播放器中实现了 HTML5 支持，在我写这篇文章的时候，他们已经取得了不同程度的进展。但预计实现会随着时间的推移而增长。一个技术问题是从广告服务器加载外部素材，这在原生 JavaScript 中带来了某些相同的域安全限制。这就是为什么使用 CORS 方法，如在第六章中所讨论的，对于资源共享是非常重要的。让我们看看如何使用一个兼容 HTML5 的视频资源的移动标签(见清单 8-11 )。
清单 8-11。 移动广阔的例子
<VAST version="2.0">
<Ad id="12345">
<InLine>
<AdSystem>HTML5 Compatible</AdSystem>
<AdTitle>VAST 2.0 Instream Test</AdTitle>
<Description>VAST 2.0 Instream Test</Description>
<Error>http://url/error</Error>
<Impression>http://tracking/impression</Impression>
<Creatives>
<Creative AdID="12345">
<Linear>
<Duration>00:00:30</Duration>
<TrackingEvents>
<Trackingevent="creativeView">http://tracking/creativeView</Tracking>
<Tracking event="start">http://tracking/start</Tracking>
<Tracking event="midpoint">http://tracking/midpoint</Tracking>
<Tracking event="firstQuartile">http://tracking/firstQuartile</Tracking>
<Tracking event="thirdQuartile">http://tracking/thirdQuartile</Tracking>
<Tracking event="complete">http://tracking/complete</Tracking>
</TrackingEvents>
<VideoClicks>
<ClickThrough>http://www.somedomain.com</ClickThrough>
<ClickTracking>http://tracking/click</ClickTracking>
</VideoClicks>
<MediaFiles>
<MediaFile delivery="progressive" type="video/mp4" bitrate="1000" width="640" height="360" scalable="true" maintainAspectRatio="true">
[`cdn.somedomain.com/video.mp4`](http://cdn.somedomain.com/video.mp4)
</MediaFile>
<MediaFile delivery="progressive" type="video/ogg" bitrate="1000" width="640" height="360" scalable="true" maintainAspectRatio="true">
[`cdn.somedomain.com/video.ogg`](http://cdn.somedomain.com/video.ogg)
</MediaFile>
<MediaFile delivery="progressive" type="video/webm" bitrate="1000" width="640" height="360" scalable="true" maintainAspectRatio="true">
[`cdn.somedomain.com/video.webm`](http://cdn.somedomain.com/video.webm)
</MediaFile>
</MediaFiles>
</Linear>
</Creative>
<Creative AdID="12345Companion">
<CompanionAds></CompanionAds>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
这只是常规的大量标记——但是，请查找媒体文件节点(粗体)和所使用的特定视频资源。你能看见吗？使用了三种不同的视频类型(MP4、OGG、WebM ),以满足所有 HTML5 浏览器及其不同的格式要求。此外，请记住，一些 HTML5 视频播放器可能需要 JSON 代码，而不是 XML。同样，这些信息将来自特定的发行商和他们的视频播放器需求。
本机设备功能
本节将回顾 mobile 可以访问的一些原生特性，以及赋予移动开发者权限的各种 API。移动浏览器和设备有许多功能:打电话、GPS 定位、深度链接到应用商店、加速度计、陀螺仪和指南针等等。所有这些设备功能都可以用来更好地增强您的创造力，您将在以下章节中了解到这一点。一些新兴设备甚至支持 NFC(近场通信)、用于检测气候的气压计和用于检查磁性的磁力计，所有这些都可以帮助你的广告获得真正相关的信息——比如用户查看你的广告时的湿度。让我们回顾一下如何使用这些令人惊叹的 API 和 JavaScript 来访问这些功能，并为移动设备提供高度丰富的广告体验，同时在不支持它们的地方进行优雅的故障转移。在深入研究之前，请参见mobilehtml5.org了解哪些 API 和特性可以用于特定的设备和浏览器。
触摸
让我们从触摸开始，这可能是最受欢迎的移动设备功能。你肯定知道，当今市场上的大多数手机和平板电脑都提供电容式触摸屏界面，允许用户用手指进行交互，而不是传统的点击鼠标界面。这是 web 内容开发方式的一个巨大转变，因为业界已经习惯于将鼠标点击和鼠标悬停作为一种交互和测量的形式。现在，开发人员可以利用点击、滑动、挤压和其他手势来增加创意的交互性，从而为广告商和创意机构开辟一个全新的沉浸式创意世界。与传统的“点击展开”CTA 不同，您会注意到“点击展开”、“点击呼叫”、“点击地图”等等。这些 CTA 越来越广泛地应用于触摸设备，尤其是移动广告。
触摸事件
在移动设备和平板电脑上使用 touch API 时会用到以下事件:touchstart，当手指放在任何 DOM 元素上时都会触发；touchmove，当手指沿着任意 DOM 元素拖动时触发；和 touchend，当手指从任何 DOM 元素移开或拿起时触发。还记得我们的视窗设置吗？移动浏览器本身有默认的触摸设置。如果你想一想，如果你的浏览器有自己的滑动和手势行为，你的广告创意也有，这就不会那么好了。要解决这个问题，请使用 user-scalable=no 设置视口，使用户无法缩放。通过在您的代码编辑器中执行并使用 JavaScript touch API，您可以使用代码来触摸并拖动屏幕上的元素，并指示浏览器阻止其默认行为，即移动整个窗口(参见清单 8-12 )。
清单 8-12。 阻止浏览器的默认触摸行为
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=no">
</head>
<body>
<div id="element" style="position:absolute; background-color:black; width:50px; height:50px;"></div>
</body>
<html>
<script>
var element = document.getElementById("element");
element.addEventListener('touchmove', function(event) {
event.preventDefault();
if (event.targetTouches.length === 1) {
console.log(event)
var touch = event.targetTouches[0];
// Place element where the finger is
element.style.left = touch.pageX + 'px';
element.style.top = touch.pageY + 'px';
}
}, false);
</script>
</html>
如果你在一个支持触摸的浏览器上刷新你的页面，你可以用你的手指在浏览器上触摸并拖动元素。无论你的手指去哪里，元素都会跟着去。这可能是在支持触摸的浏览器上实现拖放式效果的一个很好的方法。
如果你经常使用 touch——我希望你在为移动设备开发时也经常使用——一个非常好的 JavaScript 框架，叫做 hammer js(eightmedia.github.com/hammer.js)，可以加速你的开发。这个框架允许你在头脑中快速开发触控功能，压缩后只需要大约 2 千字节，这足以在移动广告单元中自由使用。
注意当在支持触摸的浏览器中对输入字段应用 CSS3 变换时，一些 Android 设备会失去对输入的关注。在未来版本中解决这些问题之前，最好不要应用 CSS 转换。
方向
方向是移动设备的另一个有趣的特征(大多数移动设备都有这些传感器)。方向仅仅是指用户如何物理地握住实际的手机或平板电脑。在纵向或横向模式下，您可以使用方向 API 来检测屏幕布局并做出相应的反应。这一点很重要，因为你很可能需要为两个版本开发两种不同的广告，或者使用一个“安全区域”来适应两个版本。有时，出版商会要求提供两个独立的广告标签，但这有望很快淘汰，因为不应该为设备级功能进行另一个 HTTP 调用。理想情况下，目标应该是能够适应设备屏幕的响应式广告布局。典型的情况是使用 JavaScript 和 CSS 将创意重新加工到新的维度，并相应地调整创意布局。清单 8-13 可以用来检测你的创意中的方向。
清单 8-13。 定向示例(HTML)
<html>
<head>
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css">
</head>
<body>
</body>
</html>
从这段代码中可以看到，在文档的头部有两个样式表引用——一个处理纵向布局，另一个处理横向布局(注意媒体查询)。这样，广告创意可以根据用户的方向相应地调整其布局。还有一种方法可以达到这种效果，那就是使用直接的 CSS(见清单 8-14 )。
清单 8-14。 定向示例(CSS)
@media only screen and (orientation: landscape) {
*/* rules for device in landscape orientation */*
*#ad {...};*
}
@media only screen and (orientation: portrait) {
*/* rules for device in portrait orientation */*
*#ad {...};*
}
如您所见，CSS 规则可以在 CSS 样式表中包含特定的媒体查询。要了解除定位之外的其他媒体查询，请参见w3.org/TR/css3-mediaqueries。
注在撰写本文时，媒体查询中的 orientation 属性在苹果的 iPhone 和其他一些手机设备上不可用。
在我看来，最好的技术还是了解你所服务的设备的屏幕尺寸，并使用 CSS 媒体查询和 JavaScript 中的 orientationchange 事件来满足每个设备的需求。清单 8-15 显示了如何检测变更事件。
清单 8-15。 方位示例(JavaScript)
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
<script>
window.addEventListener("orientationchange", function() {
if (window.orientation === 0 || window.orientation === 180) {
//portrait
showPortrait();
} else {
//landscape
showLandscape();
}
}, false);
function showPortrait () {
document.body.style.backgroundColor = 'yellow';
}
function showLandscape () {
document.body.style.backgroundColor = 'black';
}
</script>
</html>
请注意，事件侦听器被添加到 orientationchange 事件的窗口对象中。如果设备改变方向，它将广播此事件，这可以调整。请注意，在我们的函数中，正在检查 window.orientation，它是 window 对象的一个固有属性。如果你发现它返回 0 或者 180，你就知道这个设备是纵向的，如图图 8-11 所示。
图 8-11。纵向设备
否则，它要么是 90°要么是 90 °,这意味着设备处于横向，如图图 8-12 所示。
图 8-12。横向放置的设备
因为在广告中，你必须很快地把东西推出去，所以开发两种创造性的布局根本不是一个选择。在这种情况下，我通常会指示客户开发对广告布局最有意义的方向，并在用户切换方向时为他们切换指示卡。图 8-13 展示了最近的一次 iPad 宣传活动。在左边你会看到纵向布局的指导卡，在右边你会注意到完整的广告体验。
图 8-13。以下是移动广告如何在每个方向上有两种不同的设计
在某些情况下，这是一个更好的技术，特别是如果创意是一个在风景中看起来更好的视频，或者是一个在肖像中更好的游戏。再说一次，这大部分将在个案的基础上处理，所以一定要考虑你自己的创意，并在开发前指导你的客户。
陀螺仪、指南针和加速度计
既然您刚刚了解了移动设备的方向，让我们更进一步，讨论陀螺仪、指南针和加速度计。这些 API 中的每一个都可以通过直接绑定到设备功能来为您的广告创意提供丰富的增强功能。如何在广告体验中使用这个 API 的一个很好的例子是在bit.ly/OAf8BX发现的，它利用加速计 API 和画布为用户提供迷宫般的体验。
为了利用这些很酷的特性，您需要了解一些关于 deviceorientation 规范的知识。设备定位 API 概述了 DOM 将如何监听特定事件——如设备定位、compassneedscalibration 和设备运动——以通过我们的广告的 JavaScript 进行挖掘。查看清单 8-16 中的代码，了解如何使用这个 API。
清单 8-16。 加速度计/陀螺仪示例
<script>
var ad = document.querySelector('#ad');
window.addEventListener("deviceorientation", function(event) {
// process
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
console.log('Alpha : ' + a + ' Beta : ' + b + ' Gamma : ' + g);
ad.style.webkitTransform = 'translate3d(' + Math.round(a) + 'px, ' + Math.round(b) + 'px, ' + Math.round(g) + 'px)';
}, true);
</script>
您可以看到，我们正在为设备方向事件添加一个事件侦听器，它将返回关于窗口方向状态的 alpha、beta 和 gamma。那么什么是阿尔法、贝塔和伽玛呢？它们实际上是设备从上到下、从左到右以及以环形方式旋转的度量(在方向规范中有更详细的解释)。最后，使用我们的 ad 元素，通过调用 translate3d 函数并对 ad 的 x、y 和 z 属性应用 alpha、beta 和 gamma 值，对 ad 单元应用 CSS3 转换。如果你跟着做，你应该能够看到你的广告元素在屏幕上根据你如何改变方向而移动。如果你问我的话，这是一个非常微妙但巧妙的效果！
使用加速度计也可以访问“摇动”手势，但由于需要一些编码，请务必查看github.com/alexgibson/shake.js以快速实现。有关器件方向规范的更多信息，请参见 dev.w3.org/geo/api/spe… 的。有关 iOS 和 compass 使用的更多信息，请参见developer . apple . com/library/safari/# documentation/safaridomain additions/Reference/deviceorientionevent/deviceorientionevent . html。
注意在
help . ArcGIS . com/EN/webapi/JavaScript/ArcGIS/help/js samples _ start . htm # js samples/mobile _ compass . html有一个很好的使用 Webkit compass 的例子。
协议
移动广告的另一大优势是直接在广告体验中打电话和发短信。在移动设备中，特定协议可用于 TEL 和 SMS 等。电话和短信可以让用户在设备上打开本地电话或短信客户端。这个例子演示了如何做。
<a href="tel:18005551212">Call!</a>
<a href="sms:18005551212">Text!</a>
这种简单的交互提供了出色的用户体验；用户不必复制和粘贴文本，也不必在应用之间切换。他们需要做的只是点击链接 CTA，然后收到通知，让他们打电话或发短信。如果你想让某人联系客户服务，或者甚至在当地汽车经销商处安排一次试驾，这真的很棒。除了这些内置协议之外，当用户在特定链接上进行交互时，本机应用可以分配自己的协议，以便从浏览器中打开自己。这里有一段代码展示了苹果的 Facetime 和微软的 Skype 是如何使用它们自己的协议的。
<a href="facetime://18005551212">Facetime me!</a>
<a href="skype:youUserID?call">Skype!</a>
请记住，许多应用都有自己的协议，但在移动领域，这对广告商来说非常有利。这也不是电话或通讯应用特有的；内容提供商和出版商——包括使用 wsj://【的《华尔街日报》——使用协议从一个链接打开应用内部的特定用户交互。当网页或广告与原生应用无缝通信时，这是一个非常好的特性。你可以让用户从广告单元中尝到信息的滋味，并要求他们通过更深入地挖掘应用环境来阅读更多信息。
MMA 和 IAB
在回顾所有这些信息时，你可能会问自己一个关于标准和移动广告准则的问题。幸运的是，就像桌面广告一样；在移动领域也有一套新兴的标准和指导方针需要遵循。移动营销协会(MMA)(mmaglobal.com)和互动广告局(IAB；iab.net 是移动在线广告的标准组织。MMA 传统上侧重于静态广告，而 IAB 更侧重于移动领域的丰富广告。以下是 IAB 和 MMA 为 rich 和 static 设置的一些常见的移动广告单元大小。
- 典型的移动富媒体横幅尺寸:300 × 50、320 × 50
- 典型的移动富媒体面板尺寸:300 × 300、320 × 320 或全屏(320 × 480)
- 需要面板上的关闭按钮
- 静态 MMA 尺寸
- XL (300 × 50)
- 大(216 × 36)
- 中等(168 × 28)
- 小(120 × 20)
IAB 还专注于被称为“明日之星”的移动富媒体格式，这种格式对广告出版商和广告服务器来说更有吸引力。这些格式包括全屏单元、滑块和电影创意广告单元。每一个都提供了独特的体验；他们超越了静态横幅房地产。参见iab.net/risingstarsmobile了解更多信息。
设备测试
在本章结束时，我想谈谈在处理移动开发时可以使用的工具——我知道这可能会让人不知所措！在所有这些移动设备上进行测试可能会很痛苦。有太多的设备可以控制你的内容在每个屏幕上的外观和行为。有很多服务可以进行虚拟设备和浏览器测试:Device Anywhere、BrowserStack、Opera 的移动模拟器等等。它们非常好，但是没有什么比在真实的东西上测试更准确，所以一定要联系在线社区，在他们可能随时可用的设备上启动一些测试。网络上也有各种免费工具来缓解你的移动开发困境:jsconsole.com、remote-tilt.com，以及移动“查看源”工具、snoopy.allmarkedup.com，都有非常棒的免费功能集。此外，还有免费的远程调试工具:Adobe Edge Inspect(正式名称为 Adobe Shadow)[html.adobe.com/edge/inspect]，Weinre[people.apache.org/∼pmuellr/weinre/docs/latest]，以及 Safari 为 iOS 6 新开发的开发者工具集都值得一试。最后，有时你绝对需要在实际设备上进行测试，所以如果你需要开车去当地的电子商店查看最新的设备，那么就去吧——特别是如果你的客户将使用你无法获得的设备。有可能你至少会有一个客户会在“百万分之一”的设备上观看你的创意，如果你不测试它，它可能会让你付出整个活动的代价。
摘要
这一章已经介绍了很多关于移动广告和移动网络的内容。景观是广阔的，破碎是非常明显的。某些技术仅适用于某些浏览器、设备和操作系统版本。移动广告和 HTML5 携手并进，移动对如何与不断发展的 HTML5 规范合作以及其各种 API 开发者可以获得什么有着特定的看法。我们回顾了我们生活的移动世界以及如何构建它，甚至讨论了各种可以用来构建丰富的广告创意的原生设备功能。希望在读完这一章后，你会有信心回答客户的问题，比如“JavaScript 能和 HTML5 一起用于开发 iPad 的互动广告吗？”下一章关注移动应用广告的广阔世界。这是事情变得更棘手的地方，空间碎片明显变得更厚。但这也是移动广告更复杂、更吸引人的地方。如果你准备好了，让我们深入应用广告的世界。
