目前HTML5技術已漸漸成為主流，主流的瀏覽器都已支持HTML5。越來越多的應用使用了HTML5的元素，如canvas、video等，另外網頁存儲功能更增加了用戶的網絡體驗，使得越來越多的開發者在使用這樣的標準，所以我們也需要學習如何使用自動化技術來測試它們。

　　WebDriver支持在指定的瀏覽器上測試HTML5，另外，我們還可以使用JavaScript來測試這些功能，這樣就可以在任何瀏覽器上測試HTML5了。

　　大多數瀏覽器使用控件（如Flash）來播放視頻，但是，不同的瀏覽器需要使用不同的插件。HTML5定義了一個新的元素<video>，指定了一個標準的方式來嵌入電影片段，IE9+、Firefox、Opera、Chrome都支持該元素。

代碼如下圖：

　　JavaScript函數有個內置的對象叫做arguments。Arguments對象包含了函數調用的參數組，[0]表示取對象的第一個值。

　　currentSrc熟悉返回當前音頻/視頻的URL。如果未設置音頻/視頻，則返回空字符串。Load()、play()、pause()等控制著視頻的加載、播放、暫停。

視頻采集和管理是多模態大數據應用場景必不可少的環節，在基于Vue2前端框架實現的Web界面如何進行視頻的展示和播放是開發人員會遇到的一個主要技術問題。本文提供基于Vue2+video.js實現視頻的預覽的方案。

采集的視頻數據在前端視頻管理模塊列表中展示，然后用彈窗查看視頻詳情并預覽播放。最開始使用 vue-mini-player 組件，可輕松實現視頻在編輯界面的彈窗中播放，但是遇到兩個問題：1）彈窗中播放著視頻，關閉窗口后，視頻流不會停止。2）關閉窗口，重新打開新的視頻編輯窗口后，依舊是繼續播放之前的視頻。其原因應該是關閉舊的窗口后，視頻播放的控件沒有銷毀，導致新打開的控件其實還是舊控件的實例。查了很多關于vue-mini-player的文檔和使用樣例，沒有找到如何銷毀vue-mini-player控件。

video.js 是一個通用的可嵌入網頁的視頻播放器JS庫，在Vue2中引用video.js可以創建播放組件對象，關閉視頻時能進行操作。基于Vue2使用video.js方法如下。

1. 安裝video.js：

npm install video.js@6.13.0

2. main.js注冊

import videoJs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.videoJs = videoJs //注冊

3. vue代碼文件中使用組件

創建<video>組件，可放在彈窗中任何需要的地方。重點是給出id值，設置屬性時需要用到。

<template>
  <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <video id="casvideoplayer" ref="videoPlayerRef" class="video-js">
          <source :src="playUrl" type="video/mp4">
      </video>
      ...
      <div slot="footer" class="dialog-footer">
        	<el-button type="primary" @click="submitForm">確 定</el-button>
        	<el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</template>

export default {
data() {
    return {
    // 使用video.js播放視頻配置
    videoJsPlayer: null,
    playUrl:"", 			//視頻文件鏈接
    videoPlayerOption: {
        controls: true, 			//確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
        // url: "", 							//要嵌入的視頻資源url（不起作用？）
        poster: '',   					//封面
         autoplay: false, 	//自動播放屬性, true/false/"muted"(靜音播放)
        muted: false, 				//靜音播放
        preload: 'none', 		//建議瀏覽器是否應在<video>加載元素后立即開始下載視頻數據。
        fluid: false, 					//是否自適應布局,播放器將會有流體體積。換句話說，它將縮放以適應容器。
        width: "850px", 		//視頻播放器的顯示寬度（以像素為單位）（fluid=false時起作用）
        height: "600px", 		//視頻播放器的顯示高度（以像素為單位）（fluid=false時起作用）
     },
};

methods: {
   // 視頻列表的“修改”按鈕，點擊后顯示修改彈窗
   handleUpdate(row) {
        // 從后臺獲取視頻信息
        getVedio(row.id).then(response => {
            this.form = response.data;    //修改彈窗其他字段信息賦值
            this.title = "修改視頻管理";
            this.open = true;    								// 顯示修改彈窗

            // video.js組件播放視頻
            this.videoPlayerOption.poster = response.data.avator;
            this.playUrl = response.data.contentsOrg;
            this.showVideoWindow();   //設置視頻播放控件
        });
     },
       
    //（重點是這里）
    // 使用video.js組件播放視頻
     showVideoWindow(){
        // 如果視頻播放控件已經存在，切換視頻url，重新播放；如果控件不存在，創建
        if(this.videoJsPlayer){
            this.videoJsPlayer.src([
                 {
                    src: this.playUrl,
                    type: "video/mp4"
                 }
             ]);
            // 如何圖片不為空，設置視頻封面
            if(this.videoPlayerOption.poster != null && this.videoPlayerOption.poster != ""){
            		this.videoJsPlayer.poster(this.videoPlayerOption.poster);
             }
            this.videoJsPlayer.load(this.playUrl);
            // this.videoJsPlayer.play();      //自動播放（打開后，切換視頻后需自動播放）
         }else{
            // 最開始創建一次視頻播放組件
            this.$nextTick(() => {
                this.videoJsPlayer = this.videoJs(
                    "casvideoplayer", 				//播放器控件id
                    this.videoPlayerOption //播放器設置項（這里設置的poster屬性不生效，需要在后面單獨設置）
                 );
                this.videoJsPlayer.poster(this.videoPlayerOption.poster);  //貌似不生效？
             })
         }
     },
       
    // 編輯彈窗頁面的“取消”按鈕
    cancel() {
        // 重置視頻控件數據（video.js組件）
        if(this.videoJsPlayer){
            this.videoJsPlayer.reset();
         }
					this.reset();
 		},
｝

以上代碼實現了在Vue2彈窗中播放視頻組件的功能，注意關閉彈窗時要使用“取消”按鈕。如果通過點擊彈窗右上角X關閉彈窗，視頻還可以在后臺繼續播放，但是打開一個新的視頻修改彈窗后，播放的視頻會終止，并切換到新視頻播放界面。即使這樣，目前的功能已經不影響用戶正常使用。

video.js還有一個強大功能，看到喜歡的畫面點擊右鍵可以保存視頻幀，另外支持畫中畫、設備投放等功能。

后續優化改進工作包括：1）把video.js視頻播放功能做成Vue組件，方便在不同的Vue代碼文件中調用。2）捕獲窗口關閉的事件（如點擊X關閉，或者鼠標失焦點后關閉），關閉視頻流。

【參考材料】

video.js官方網站：https://videojs.com/

其他編碼材料：

https://blog.csdn.net/qq_60533482/article/details/128015308

https://blog.csdn.net/Uookic/article/details/116131535

https://www.cnblogs.com/DL-CODER/p/16833222.html

Qt中，可以使用QWebEngineView來嵌入Web內容。然而，QWebEngineView不直接支持播放MP4視頻。要在Qt中播放MP4視頻，你可以考慮以下幾種方法：

1. 使用HTML5的video標簽：創建一個HTML頁面，通過video標簽將MP4視頻嵌入其中，然后使用QWebEngineView加載該HTML頁面。

```cpp

QUrl url("path_to_your_html_page.html");
webEngineView->load(url);

```

2. 使用JavaScript和HTML5的Video對象：通過執行JavaScript代碼，在QWebEngineView中動態創建Video對象，并設置其屬性和事件監聽器。

```cpp

QString javascriptCode = "\
var video = document.createElement('video'); \
video.src = 'path_to_your_video.mp4'; \
document.body.appendChild(video); \

";

webEngineView->page()->runJavaScript(javascriptCode);

```

3. 使用第三方的JavaScript庫：例如Video.js、jPlayer等，這些庫提供了更多的功能和樣式定制選項。你可以在HTML頁面中引入這些庫并使用其API進行視頻播放控制。

無論哪種方法，確保你已經將必要的MP4文件路徑正確設置，并根據需要調整其他參數（如寬度、高度、自動播放等）。