是否可以播放非视频标签中的视频，如果可以，您该怎么做？

Question

我们都知道，要以最基本的方式在网页上播放视频，您将使用与此html代码类似的内容

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

但是，虽然在许多不同的网站上窥视了检查功能并查看了元素内的标签，但我不禁注意到有些视频平台有时似乎仅使用<div></div>。

这里有两个例子

• youtube：   如果您检查了YouTube上的任何视频页面，然后右键单击该视频并检查html，则将看到<video></video>标签，但是如果您单击视频标签（以启动悬停状态）并且单击全屏，您将看到视频标签似乎消失了，并变成了div。如果您想自己看看https://www.youtube.com/watch?v=-h0MaGc7nx0，请点击此处，链接到youtube视频页面。
• 抽搐：   如果您在抽搐视频页面上浏览，他们似乎根本不使用<video></video>标签，而是使用<div></div>标签。最初，我认为这是因为它们提供实时视频，因此工作原理有所不同，但是如果您查看实时Facebook游戏视频，您会注意到它使用了常规的<video></video>标签。这是抽搐视频页面的链接，以便您自己https://www.twitch.tv/videos/368024918来看看。这是指向Facebook游戏页面的链接，以便您也可以看看并比较https://www.facebook.com/gaming/?external_ref=games_video_bookmark。

这极大地激发了我的好奇心。他们如何做到的？为什么程序员或公司会选择这种方式而不是传统方法？

Answer 1

您提供的所有示例均使用控件后面的video标签。当您检查它时，会看到一个带有控件的div，但是如果您深入（或更高），则会看到video隐藏。

这样可以更好地控制播放器的样式和控件。除了使用默认按钮外，您还可以看到onclick使用视频API的暂停，播放，静音等按钮。这样一来，他们就可以在任何地方单击以暂停视频，或者在YouTube视频的最后几秒钟添加卡片。

有一种方法可以使用老式的Flash（这是网站在html5之前播放视频的方式）或画布，而不是使用视频标记播放视频，方法是逐帧绘制（即使使用画布，大多数情况下也有视频）标签以获取要绘制的框架。