- 掃描 ID：
- 846454a6-13ab-443a-b9c0-70eff3e24342已完成
- 已提交的 URL：
- https://webvideoplayer.org/
- 報告完成時間：
連結 · 找到 4 個
從頁面中識別的傳出連結
| 連結 | Text |
|---|---|
| https://chrome.google.com/webstore/detail/kfcfjmdnmmokdhndbpfcachlkliggggc | Chrome Extension |
| https://microsoftedge.microsoft.com/addons/detail/jelgjmnljfkdhdlkoijglfifcopgodlp | Edge Extension |
| https://caniuse.com/?search=video%20format | caniuse |
| https://guokai.dev/ | Jackie(Guokai) Han |
JavaScript 變數 · 找到 6 個
在頁面的視窗物件上載入的全域 JavaScript 變數是在函數外部宣告的變數，可從目前範圍內程式碼中的任何位置存取
| 名稱 | 類型 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| popupPlayer | object |
| openPlayer | function |
| init | function |
主控台記錄訊息 · 找到 1 條
記錄到 Web 主控台的訊息
| 類型 | 類別 | 記錄 |
|---|---|---|
| log | other |
|
HTML
頁面的原始 HTML 主體
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Web Video Player</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/svg+xml" href="/icon/icon.svg">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<style type="text/css">
h1 {
margin-top: 1.5rem;
}
.screenshot {
width: 640px;
}
</style>
</head>
<body class="p-4">
<div class="container">
<div class="text-center">
<figure class="figure">
<img src="img/screenshot-1.png" class="figure-img img-fluid screenshot" width="1280" height="800" alt="screenshot">
<figcaption class="figure-caption text-center">Screenshot</figcaption>
</figure>
</div>
<h1>Web Video Player</h1>
<p>An easy-to-use and very lightweight(<100KB) video player for local video/audio files on desktop platforms, powered by Web technology.</p>
<p>In addition to using the mouse, it supports many useful <a href="shortcuts.html" class="text-reset">keyboard shortcuts</a>, as well as a few simple settings.</p>
<h1>Get the App</h1>
<table class="table">
<thead>
<tr>
<th scope="col">Installation methods</th>
<th scope="col">
<button id="installBtn" type="button" class="btn btn-primary" disabled="">PWA Install</button> <sup>[1]</sup>
</th>
<th scope="col">
<button id="openBtn" type="button" class="btn btn-primary">Web Version</button> <sup>[2]</sup>
</th>
<th scope="col"><a class="btn btn-primary" href="https://chrome.google.com/webstore/detail/kfcfjmdnmmokdhndbpfcachlkliggggc" target="_blank" role="button">Chrome Extension</a></th>
<th scope="col"><a class="btn btn-primary" href="https://microsoftedge.microsoft.com/addons/detail/jelgjmnljfkdhdlkoijglfifcopgodlp" target="_blank" role="button">Edge Extension</a></th>
</tr>
</thead>
<tbody class="align-middle">
<tr>
<th scope="row">Core functions</th>
<td>✔️</td>
<td>✔️</td>
<td>✔️</td>
<td>✔️</td>
</tr>
<tr>
<th scope="row">Hide the address bar</th>
<td>✔️</td>
<td>❌ <sup>[3]</sup></td>
<td>✔️</td>
<td>✔️</td>
</tr>
<tr>
<th scope="row">Available offline</th>
<td>✔️</td>
<td>Maybe</td>
<td>✔️</td>
<td>✔️</td>
</tr>
<tr>
<th scope="row" id="launch_ways">Launch the app</th>
<td>After installation,<br>Same as native apps <sup>[4]</sup></td>
<td>1. Visit this site<br>2. Click the button above</td>
<td>After installation,<br>Click the extension icon</td>
<td>After installation,<br>Click the extension icon</td>
</tr>
<tr>
<th scope="row">Basic ways to open files <sup>[5]</sup></th>
<td>✔️</td>
<td>✔️</td>
<td>✔️</td>
<td>✔️</td>
</tr>
<tr>
<th scope="row">Double click to open file <sup>[6]</sup></th>
<td>✔️ <small class="text-muted">(Chrome 102+)</small></td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
</tr>
</tbody>
</table>
<ol class="small text-muted">
<li>Only show installation prompts on Chrome and Edge if the app is not installed. You can also click the install icon in the address bar to install. Other browsers may not support installation.</li>
<li>Open a popup window to use.</li>
<li>Only Safari hides the address bar.</li>
<li>For example, the start menu on Windows or the Launchpad on macOS.</li>
<li>Open videos by 1) click the folder icon in the player; 2) Ctrl/Cmd+O shortcut; 3) Darg and drop files to the player.</li>
<li>In the operating system's file manager, you can double-click one or multiple files, or right-click the file ("Open with…") to play videos. This feature is supported from Chrome 102. "Single window mode" (open files in the existing window) is supported from Chrome 110.</li>
</ol>
<h1>Browser Support <sup>[1]</sup></h1>
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">PWA Install</th>
<th scope="col">Web Version</th>
<th scope="col">Browser Extension</th>
</tr>
</thead>
<tbody class="align-middle">
<tr>
<th scope="row">Chrome</th>
<td>✔️ <img src="img/recommend.svg"></td>
<td>✔️</td>
<td>✔️ <img src="img/recommend.svg"></td>
</tr>
<tr>
<th scope="row">Edge</th>
<td>❌ <sup>[2]</sup></td>
<td>✔️</td>
<td>✔️ <img src="img/recommend.svg"></td>
</tr>
<tr>
<th scope="row">Firefox</th>
<td>❌</td>
<td>✔️</td>
<td>❌</td>
</tr>
<tr>
<th scope="row">Safari</th>
<td>❌</td>
<td>✔️ <sup>[3]</sup></td>
<td>❌</td>
</tr>
</tbody>
</table>
<ol class="small text-muted">
<li>Which OS platforms are supported? Currently, it’s available on all desktop platforms, including Windows, macOS, Linux and Chrome OS. Mobile platforms may be supported in the future.</li>
<li>Edge browser has a special bug at the moment that causes some files to fail to play, which only appears in PWA install mode, but does not exist in other modes.</li>
<li>There may be some bugs.</li>
</ol>
<h1>Video Codecs <sup>[1]</sup></h1>
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Chrome</th>
<th scope="col">Edge</th>
<th scope="col">Safari</th>
<th scope="col">Firefox</th>
</tr>
</thead>
<tbody class="align-middle">
<tr>
<th scope="row">AVC (H.264)</th>
<td>✔️</td>
<td>✔️</td>
<td>✔️</td>
<td>✔️</td>
</tr>
<tr>
<th scope="row">HEVC (H.265)</th>
<td>✔️ <small class="text-muted">(Chrome 107+)</small></td>
<td>❌</td>
<td>✔️</td>
<td>❌</td>
</tr>
<tr>
<th scope="row">AV1</th>
<td>✔️</td>
<td>❌</td>
<td>❌</td>
<td>✔️</td>
</tr>
<tr>
<th scope="row">WebM</th>
<td>✔️</td>
<td>✔️</td>
<td>✔️</td>
<td>✔️</td>
</tr>
<tr>
<th scope="row">Ogg/Theora</th>
<td>✔️</td>
<td>✔️</td>
<td>❌</td>
<td>✔️</td>
</tr>
</tbody>
</table>
<ol class="small text-muted">
<li>Source: <a href="https://caniuse.com/?search=video%20format" class="text-reset" target="_blank">caniuse</a>. Because the underlying core functions are completely implemented by the browser, only some video formats and codec are supported. In addition, it doesn't support multiple audio tracks switching.</li>
</ol>
<h1>FAQ</h1>
<h5>How to open the player?</h5>
<p>See "<a href="#launch_ways" class="text-reset">Launch the app</a>" row in the "Get the App" table.</p>
<h5>How to open files?</h5>
<ul>
<li>Click the "Folder" icon in the player.</li>
<li>Keyboard shortcut: Ctrl + O (on Windows) or Cmd + O (on macOS).</li>
<li>Drag and drop files to the player.</li>
<li>If you use PWA installed mode, you can open files in the OS file manager directly by right-click or double-click.</li>
</ul>
<h5>Subtitles</h5>
<p>Independent or embedded subtitles are not supported, but if the subtitles are already in the video stream, they can be displayed. Maybe I will support independent subtitle files in the future.</p>
<h5>Online streaming media</h5>
<p>Currently only supports local file playback. There are no plans to support online streaming media.</p>
<h5>How to uninstall the app?</h5>
<p>For the PWA install version, open "about://apps" in the address bar (or the launcher if you use ChromeOS), then right click the app icon. For the Browser extension version, open "about://extensions". You can install it again at any time after uninstalling.</p>
<h5>Privacy</h5>
<p>This app works offline in your browser. It does not collect any information from you. No data is sent to my server.</p>
<div class="small text-center text-muted mt-4">2021-2023, Created by <a href="https://guokai.dev/" class="text-reset">Jackie(Guokai) Han</a></div>
</div>
<script type="text/javascript" src="index.js"></script>
</body></html>