视频就是新的 HTML：一种新的内容交付格式

者丨Benedict Evans （著名移动分析师，A16Z合伙人）

编译丨IT桔子一笑

下面这张图表是 Jonah Peretti 去年年底发布的。这张关于内容模式和分发的图片有趣的地方在于它反映出了两个明显的趋势：分发平台的扩增以及内容模式的扩增。

图中的每一段都是不同的用户获取模式，同时也是不同内容格式的平台。进行浏览的方式、内容类型以及潜在的内容类型都是不同的。

在这种扩增中，分发模型有两个发展方向：

算法驱动的信息流（Facebook、Twitter、Instagram）
人工策划（SnapchatDiscover通过编辑和艺术家团队策划内容）

而内容模型：

一方面格式变得越来越丰富和沉浸式（往往是通过视频的形式）
另一方面更轻量的、基于文本的格式也越来越流行（AMP、Facebook Instant Articles）

尽管 AMP 和 Articles 强调的是加载速度，但就像Facebook 或 Snapchat 上的视频，内容也是受控于平台方。

与此同时，Google 做 AMP、Facebook 做 Instant Articles 的一部分目的在于，通过去除所有的广告技术以及分析所用的 JavaScript ，转而使用 Google 和 Facebook 自己的解决方案，以节省宽带、提高渲染速度。但另一端的带宽规模却在增长，Snapchat Discover 让平台告诉你发生了什么。大多数情况下，尤其是 Facebook 和 Snapchat ，平台方可以比只依靠JavaScript提供更好的用户使用和用户的信息（理论上也会带来更好的经济效益）。此外，你获得的不仅是新内容和指标，还有新的广告格式，Snapchat 是个典型的例子，和网页条幅广告相比，这种广告形式让人感觉更加原生，与普通内容自然地融为一体。

也就是说，这些模型改变了你获取受众的方式，改变了受众看到的内容，改变了你对受众的了解，以及你如何从中赚钱的方式（大约 1/3 的移动网页浏览发生在Facebook应用内）。

Facebook 有 Instant Articles，现在Google 也有了InstantApps。你点击链接，“原生”（不会是 HTML）代码立即就会出现并运行。你可以把这看作是 Java 的回归（从某种意义上来说 Android 就是 Java），或者 Flash 的回归，我认为 Flash 的应用也很广泛。Snapchat Discover 看起来就像是 Flash，虽然在技术上来说是 h264 视频，但实际的内容却非常像10年前的Flash：丰富、互动、活动的内容混合声音、动作、动画，有时候还包括真正的实景画面。从前我们用 Flash 交付视频，现在我们用视频交付 Flash。也就是说，视频就是新的 HTML：一种新的内容交付格式。Instant Apps 做的事情一样，只不过借助的是 Android 而不是 Snapchat 。另外虽然 Google IO大会上 Instant Apps 的演示看起来更像是 app 而不是内容，但其中的原理是一样的，比 HTML 更丰富，但又不用通过应用商店。 AMP 或 Instant Stories 也足够证明我们现在已经从旧的、简单的 HTML 和 JavaScript 转到拥抱更好的体验了。

有人可能也会认为这意味着视频（包括 GIF 等格式）充当着一种新的载体：一种把各类内容封装起来的手段，使之可以在互联网上流通和分享。把GIF或视频嵌入到社交网络信息流中，成为替代 HTML 的内容交付格式，你可以嵌入任何想要的内容，包括广告。

这同时指向了指标的扩增。当 Snapchat 声称拥有“每日100 亿的视频浏览量”时，具体含义是什么？别人可以拿什么指标来做比较？如何看待自动播放的视频浏览量？如果用户静音或者没有声音呢？你肯定不能和看电视的情况作比较，只能基于跟 Facebook 或其他任何内容相同的基础上比较总时长。YouTube 至少在形式上跟电视是一样的，但 Snapchat 却不是。而且设计和报告指标的也是平台方自己。

把这个问题延伸一下，如果不能比较观看时间，也就很难比较广告支出。在大部分初始状态为静音、经常被跳过的“视频” 平台上的观看时间能和电视热播节目上的观看时间相比吗？电视上播放着节目但是你却坐在沙发上看智能手机上互动性很强的富媒体内容的时间又怎么算？再想的超前一点，是不是还得考虑一下 VR 上的广告价值与互动性？

反过来看，这又让我觉得移动广告的拦截会变得更有问题。Facebook 在很长一段时间以来都是全世界最大的广告拦截者，它也是世界上最大的移动网页浏览器之一。但如果平台从单个 IP 向我发送加密的数据，比如一段 h264 视频流，里面正好又有一段广告，内容渲染用的又是私有设备进行，这种广告又怎么剔除呢？对广告拦截的最大影响也许就是把内容所有者放到离一个开放的web越来越远的地方。

关于移动端我的一个思考框架是我们正在寻找下一个 Runtime（指一个程序在运行的状态），一个继 web 和移动app 之后、在移动端创造体验的地方，这个新的Runtime也许会带来新的互动（engagement）和探索模式，也可能诞生全新的盈利模式。这显然是审视 GoogleAI助手或者 Facebook 聊天机器人平台的一种很好的方式，这种审视代码的方式一样用来审视内容也是一样的：Snapchat 和微信一样也是个开发平台，你只需要从恰当的角度观察。屏幕本身就是Runtime，越丰富、越原生就越好。

— END —

象一下，你正在为你的朋友举办一个生日聚会，他非常喜欢音乐视频。你想要给他一个特别的惊喜：在聚会期间播放一个由他最喜欢的音乐视频组成的串烧。为了让这个视觉体验更加完美，你需要确保在视频之间进行平滑切换，避免任何尴尬的停顿。幸运的是，你有一些 HTML 和 JavaScript 的基础知识，所以你决定用这些技能来制作一个自定义的视频播放器，实现无缝切换。

在本文中，我们将展示如何使用 JavaScript 和 HTML5 的 <video> 标签在不同视频之间实现平滑过渡，让你可以为你的朋友创造一个令人难忘的音乐视频串烧。

要实现视频播放中断切换并顺利过渡，可以使用 JavaScript 以及 HTML5 的 <video> 标签来实现。以下是一个基本的示例，展示了如何在两个视频之间平滑切换。

首先，我们需要在 HTML 文件中创建两个视频标签：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #videoContainer {
        position: relative;
      }

      video {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id="videoContainer">
      <br>
    		<button onclick="myFunction()" style="width: 80px;height: 30px;">Click me</button>
    	<br>
      <video id="video2" width="640" height="360" preload="auto">
        <source src="video2.mp4" type="video/mp4" />
      </video>
      <video id="video1" width="640" height="360" preload="auto">
        <source src="video1.mp4" type="video/mp4" />
      </video>
    </div>
    <script src="script.js"></script>
  </body>
</html>

然后，我们需要创建一个 JavaScript 文件（如 script.js），并编写以下代码：

const video1 = document.getElementById('video1');
const video2 = document.getElementById('video2');

// 当第一个视频播放完毕时触发
video1.onended = () => {
  // 隐藏第一个视频
  video1.style.opacity = 0;
    video2.style.opacity = 1;
  // 开始播放第二个视频
  video2.play();
};

function myFunction() {
    // ：播放第一个视频
    video1.play();
  }

在此示例中，当第一个视频播放完毕时，我们将其隐藏并开始播放第二个视频。这样可以实现在两个视频之间平滑切换。请注意，此示例仅在视频结束时切换，如果需要在特定时间点或根据其他条件进行切换，可以修改代码以适应需求。

如果你希望在视频切换时有更丝滑的过渡效果，可以尝试使用 CSS 动画。例如，在 JavaScript 中添加以下代码：

// 定义一个用于执行过渡动画的函数
function fadeTransition(videoOut, videoIn, duration) {
  videoOut.style.transition = `opacity ${duration}ms`;
    videoOut.style.opacity = 0;
  
    videoIn.style.opacity = 1;
    videoIn.play();
    
    setTimeout(() => {
       videoOut.style.display = 'none';
       videoOut.style.opacity = 1;
       videoOut.style.transition = '';

      
     }, duration);
}

// 修改 onended 事件处理程序
video1.onended = () => {
  fadeTransition(video1, video2, 500);
};

这段代码定义了一个 fadeTransition 函数，该函数会渐隐当前播放的视频并播放下一个视频。在这个例子中，我们在第一个视频结束时调用该函数，实现了两个视频之间的平滑过渡。

但是实际操作中，似乎没有动画的时候，感觉反而更流畅，这个就需要反复调试测试了。

、需求

使用 webrtc 协议做直播，常见的音视频源是摄像头和麦克风，高级一点的就是桌面分享。虽然使用桌面分享可以实现推送本地流（原理就是对屏幕录制），但依赖本地播放器，并且观众可以看到主播的任何操作。

有一种伪直播需求，需要将本地视频无感知推送给用户，让用户感觉就像直播一样。

使用webrtc协议，大多数情况是在浏览器中做主播端。众所周知，出于安全和隐私的原因，Web 应用程序不能直接访问用户设备上的文件。那么如何将本地视频源进行加载到浏览器并推送出去呢？

二、核心API

HTMLCanvasElement.captureStream()

该方法返回一个CanvasCaptureMediaStream实时视频捕获的画布。

使用例子：

//获取所需要截取媒体流的canvas element
var canvasElt = document.querySelector('canvas'); // 或者 video 标签

//截取到媒体流
var stream = canvasElt.captureStream(25); // 25 FPS

//使用媒体流
// E.g.使用RTCPeerConnection来传输给其它的电脑
// 下面的pc是其他地方创建的一个RTCPeerConnection
pc.addStream(stream);

通过以上例子，是不是恍然大雾。

此时我们的方案可以是：

上传一段视频到服务器或者云存储
使用 video 标签加载视频
使用 captureStream 捕获视频流
使用 addStream 将视频流发布

此时解决了推送视频流，但是要推送本地视频怎么做呢？

相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】

音视频免费学习地址：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~

三、最终解决方案

出于安全和隐私的原因，Web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件，可以通过使用 input file 和 FileReader 来实现。虽然 FileReader 可以读文件，但是需要经过base-64编码，如果读大文件肯定会影响效率。所以我们只能考虑 input file，可以使用 URL.createObjectURL 对视频进行预览。

那么我的最终方案就是使用 captureStream + input file预览 模式来解决这个问题。

简要代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
    <video width="500" controls>
        <source src="my_video.mp4" id="video_here">
    </video>
    <input type="file" name="file[]" class="file_video" accept="video/*">
    <script>
        $(document).on("change", ".file_video", function (evt) {
            var $source = $('#video_here');
            $source[0].src = URL.createObjectURL(this.files[0]);
            $source.parent()[0].load();
        })
    </script>
</body>

</html>

四、总结

通过以上步骤，我们可以总结如下步骤：

使用 input 标签进行文件选择
使用 video标签配合 input标签进行视频预览
使用 captureStream 捕获视频流
使用 addStream 将视频流发布

原文 https://zhuanlan.zhihu.com/p/291399800

在线咨询

上一篇：全球旅行网站HTML5模板
下一篇：亚马逊详情页面将不再支持使用HTML标记

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

视频就是新的 HTML：一种新的内容交付格式

、需求

二、核心API

三、最终解决方案

四、总结

您的项目需求