整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML基础篇-17HTML之视频播放

频是网页承载内容很重要的一个元素,也是必不可少的网页表现形式(图、文、表、视、音)之一。曾经网页要想播放视频、制作游戏,必须得用第三方插件flash。不仅编写代码要使用额外的语言,浏览器也必须得装第三方插件,非常不方便。随着html5标准逐渐普及,移动端、pc端开始抛弃flash,如今几乎所有的浏览器都使用html5来制作视频。

目标

  1. 了解Flash为何会被淘汰?
  2. 如何设置视频播放?
  3. 视频播放支持哪几种视频格式?

flash崛起--网页标准的耻辱

flash是Adobe公司其中之一的产品。它发起于W3C与WHATWG的第五代web标准之争,它捡了个大便宜,乘机定义网页媒体标准。

W3C与WHATWG的第五代web标准之争

flash填补了当时网页只有文字和图片的单调世界,将媒体(视频、音频、游戏)引入了网页,将网页带进多彩的世界。

Flash能够用仅仅十几K到几百K的体积,呈现出放大也不会失真的矢量彩色动图,甚至还能够做出足以令人沉迷一整天的Flash小游戏。

火柴人

Flash用第三方插件的身份,几乎制霸了网页媒体的标准,让W3C尴尬不已,甚至从某种程度上说,让真正的网页标准推广受阻。

flash衰败--HTML5崛起并全面普及

2010年4月,苹果CEO公开表示从此苹果所有产品不再支持flash。flash从此慢慢丧失移动端的市场和地位。

乔布斯支持html5

2012年,安卓宣布不再支持Flash,从此flash彻底失去了移动端市场和地位。

2012年html5标准确立,html5在逐渐制霸移动端的地位时,也直接冲击了flash仅剩的桌面市场,flash桌面市场的份额在逐步下降。

各大浏览器逐步默认禁用Flash,现2019年几乎都全部禁用。

默认禁用Flash

Adobe将在2020年停止开发和更新flash。

2020年停止开发和更新flash

flash兴起衰败皆因自己

Flash以第三方插件的身份,做着平台该做的事情,但没有推动行业标准统一化,反而企图私立标准。

随着功能的增多,能解码编码H.264,能进行3D渲染,能播放7.1声道环绕声等,功能集于一身变得臃肿,效率变得低下。

Flash非常不安全。Flash能够运行相当复杂的代码,这让Flash非常容易被渗透。加上Adobe在安全方面的不上心,这令Flash安全问题频发。

Flash很不稳定。作为一个插件,它自身频频崩溃也就罢了,还经常拉着浏览器乃至操作系统一起殉情。

Flash加剧了手机的耗电量。

html5媒体新标准--Video标签

作用是在 HTML 页面中嵌入视频元素。Video定义视频,比如电影片段或其他视频流。

视频播放

Video标签的属性

  • src 视频的播放源
  • controls 浏览器自带的控制条
  • width 视频宽度
  • height 视频高度
  • poster 视频封面
  • autoplay 自动播放
  • preload 预加载

有四个是必须的属性:src、controls、width、height属性。

视频播放代码

source标签

<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg。

<source> 元素可以链接不同格式的视频文件。浏览器将使用第一个可识别的格式。

  • src 视频的播放源
  • Type 视频格式 MP4, WebM, 和 Ogg

支持多格式的视频

总结

video标签体系

在QWebEngineView中播放HTML视频,可以使用HTML5的video元素。首先,确保你已经加载了包含视频标签的HTML页面。然后,在QWebEngineView中执行以下步骤:

1. 获取QWebEnginePage对象:

```cpp

QWebEnginePage *page = view->page();

```

2. 注册一个JavaScript回调函数来处理视频事件:

```cpp

QObject::connect(page, &QWebEnginePage::loadFinished, [=](bool ok) {
if (ok) {
page->runJavaScript("document.getElementsByTagName('video')[0].addEventListener('ended', function() { window.videoEnded(); });");
}
});

```

这个示例中,我们注册了一个名为`videoEnded()`的JavaScript函数来处理视频结束事件。

3. 在C++代码中定义一个槽函数来处理视频结束事件:

```cpp

public slots:
void handleVideoEnded();

```

4. 将槽函数与JavaScript回调函数关联起来:

```cpp

QObject::connect(page, &QWebEnginePage::javaScriptWindowObjectCleared, [=]() {
page->mainFrame()->addToJavaScriptWindowObject("window", this);
});

```

5. 在槽函数中实现逻辑:

```cpp

void MyClass::handleVideoEnded()
{
// 处理视频结束事件的逻辑
}

```

6. 在JavaScript中调用C++槽函数:

```javascript

function videoEnded() {
window.videoEnded();
}

```

通过这些步骤,你就可以在QWebEngineView中播放和处理HTML视频了。请注意,这里只提供了基本的示例,具体实现可能需要根据你的具体需求进行调整。

、HTML代码如下:

<div id="player"></div>

二、JavaScript代码如下:

<script src="http://cdn.jsdelivr.net/npm/xgplayer/browser/index.js" charset="utf-8"></script>
<script src="http://cdn.jsdelivr.net/npm/xgplayer-flv.js/browser/index.js" charset="utf-8"></script>
<script type="text/javascript">
 new window.FlvJsPlayer({
 id: 'player',
 isLive: false,
 playsinline: true,
 url: '/test/test.flv',
 autoplay: true,
 height: window.innerHeight,
 width: window.innerWidth
 });
</script>