vue electron上使用webview播放h265视频

在Vue Electron上使用WebView播放H.265视频，您可以按照以下步骤进行操作：

1. 安装所需的依赖：

   npm install vue-electron cross-env
   

2. 在Vue项目的package.json文件中，添加运行Electron的脚本：

   "scripts": {
     "electron": "cross-env NODE_ENV=development electron ."
   }
   

3. 创建main.js文件，作为Electron的主进程文件：

   // main.js
   const { app, BrowserWindow } = require('electron')
   
   function createWindow () {
     const mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true,
         webviewTag: true
       }
     })
   
     mainWindow.loadURL('http://localhost:8080/')
   }
   
   app.whenReady().then(() => {
     createWindow()
   
     app.on('activate', function () {
       if (BrowserWindow.getAllWindows().length === 0) createWindow()
     })
   })
   
   app.on('window-all-closed', function () {
     if (process.platform !== 'darwin') app.quit()
   })
   

4. 在Vue组件中使用WebView组件：

   <!-- App.vue -->
   <template>
     <div id="app">
       <webview id="webview" src="https://example.com/video.h265" preload="./preload.js"></webview>
     </div>
   </template>
   
   <script>
   export default {
     mounted() {
       const webview = document.getElementById('webview')
       webview.addEventListener('dom-ready', () => {
         webview.openDevTools()
       })
     }
   }
   </script>
   

5. 创建preload.js文件，用于在WebView中注入一些脚本：

   // preload.js
   const { ipcRenderer } = require('electron')
   
   ipcRenderer.on('webview-load', () => {
     const webview = document.getElementById('webview')
     webview.addEventListener('console-message', (e) => {
       console.log('WebView:', e.message)
     })
   })
   

6. 在Vue组件中发送加载WebView的事件：

   <!-- App.vue -->
   <script>
   export default {
     mounted() {
       const webview = document.getElementById('webview')
       webview.addEventListener('dom-ready', () => {
         webview.openDevTools()
   
         const { ipcRenderer } = require('electron')
         ipcRenderer.send('webview-load')
       })
     }
   }
   </script>
   

7. 运行Vue项目和Electron：

   npm run serve
   npm run electron
   

这样，您就可以在Vue Electron中使用WebView播放H.265视频了。请注意，您需要替换src属性中的URL为您的H.265视频的实际URL。另外，还可以根据需要进行样式和事件处理的调整