本人對HTML並沒有太多的使用，都是現用現查。今天想要實現一個HTML播放器來播放電腦本機存放的視頻文件。經過查資料完成一個簡單的導航框架式的HTML播放器以及其導航欄的自動跟新腳本。
導航框架式HTML播放器
html播放器
實現HTML播放器使用的是<video> </video> 標籤。代碼很簡單：
#HTML播放頁面
<!DOCTYPE html>
<html>
<head>
<title>htmlbofangqi</title>
<meta charset="utf-8" />
<style>
body{background-color: #262626; }
video{ margin-left: 0px; margin-right: 1%; height: 80%; width: 100%; margin-top: 1%; }
</style>
</head>
<body>
<div >
<video controls="controls" autoplay="autoplay" id="video"><source src="zhanlang.mp4" type="video/mp4" >
當前瀏覽器不支持video元素</video>
</div>
</body>
</html>
以下是<video></video>標籤的一些屬性（摘自w3school），更多內容請參考w3school
實現後的效果：（可播放與暫停、拖曳進度、全屏、下載，根據不同的瀏覽器顯示的界面不同）
導航框架播放器
有一些網站存在有導航欄，點擊導航欄中的鏈接，可以在另一側的頁面中顯示出來詳細內容。 我們可以做出來一個視頻列表，點擊在右側的視頻鏈接後，在左側的框架界面播放視頻資源。實現後的效果如下： 看w3school上的關於frame的內容裏關於導航框架示例看的迷迷糊糊的，總感覺缺少一些說明。這裏直接貼代碼，然後再說明：
首頁
``` # index.html:首頁將瀏覽器分爲左右兩側，左側我們播放視頻資源，右側放置視頻列表 <frame name="left_frame" id="left_frame" src="./video/default.html">
<frame name="right_frame" id="right_frame" src="playlist.html" >
</frameset>
右側導航欄
``` # playlist.html :<–以下是腳本添加的視頻列表–>
直接將 zhanlang 超鏈接放在HTML標籤外也能被瀏覽器解釋。因此爲了方便，在使用腳本更新播放列表時，直接添加在該HTML文件的末尾。
<h4>左側播放窗口</h4>
video/default.html 默認播放頁面，可通過autoplay屬性設置視頻是否自播放
腳本更新
腳本更新導航列表與創建對應視頻資源的播放頁面。 本人使用的是Linux，因此使用shell腳本來輔助更新。（腳本編寫簡單，並沒有太大技術含量，主要簡便使用，並沒有寫的多嚴格與規範）腳本源碼
``` #！/bin/bash # version : 1 # 2017年 08月 21日 星期一 12:42:35 CSTcd /home/qi/soft-install/tomcat/webapps/ROOT/video || {
echo "can not open the contents "
exit 1
}
case {i}" target=“left_frame” > ${i} " >> …/playlist.html
touch ${i}.html
cat default.html >> KaTeX parse error: Can't use function '\"' in math mode at position 29: …ed -i "15c src=\̲"̲{i}"" {i}.html Create Over"
done
;;
clean )
for i in ls *.mp4
do
rm -rf {i}.html is deleted"
sed -in “s/^.*{i} removed from playlist”
done
echo
echo “Clean Over”
;;
* )
echo -e "Usage: create [html|clean]\n\thtml : create html for all mp4 file \n\tclean : remove all the html of mp4 which under video/ "
esac
<h4>腳本測試</h4>
在video下創建大量的MP4文件：
$ for i in {1…10}; do touch $i.mp4; done #創建十個以mp4結尾的文件進行測試
$ ll
總用量 760204
drwxr-xr-x 3 qi qi 4096 8月 21 22:04 ./
drwxr-x— 3 qi qi 4096 8月 21 12:45 …/
-rw-r–r-- 1 qi qi 0 8月 21 22:02 10.mp4
-rw-r–r-- 1 qi qi 0 8月 21 22:02 1.mp4
-rw-r–r-- 1 qi qi 0 8月 21 22:02 2.mp4
-rw-r–r-- 1 qi qi 0 8月 21 22:02 3.mp4
-rw-r–r-- 1 qi qi 0 8月 21 22:02 4.mp4
-rw-r–r-- 1 qi qi 0 8月 21 22:02 5.mp4
-rw-r–r-- 1 qi qi 0 8月 21 22:02 6.mp4
-rw-r–r-- 1 qi qi 0 8月 21 22:02 7.mp4
-rw-r–r-- 1 qi qi 0 8月 21 22:02 8.mp4
-rw-r–r-- 1 qi qi 0 8月 21 22:02 9.mp4
-rwx------ 1 qi qi 729 8月 21 21:59 create.sh*
-rw-r–r-- 1 qi qi 429 8月 21 11:59 default.html
-rw-r–r-- 1 qi qi 429 8月 21 12:21 default.html.bak
drwxr-xr-x 2 qi qi 4096 8月 21 12:22 test/
-rw-r–r-- 1 qi qi 778419918 7月 31 11:12 戰狼1.mp4
執行腳本
#更新列表
$ ./create.sh html
10.mp4.html Create Over
1.mp4.html Create Over
2.mp4.html Create Over
3.mp4.html Create Over
4.mp4.html Create Over
5.mp4.html Create Over
6.mp4.html Create Over
7.mp4.html Create Over
8.mp4.html Create Over
9.mp4.html Create Over
戰狼1.mp4.html Create Over
清理
$ ./create.sh clean
10.mp4.html is deleted
10.mp4 removed from playlist
1.mp4.html is deleted
1.mp4 removed from playlist
2.mp4.html is deleted
2.mp4 removed from playlist
3.mp4.html is deleted
3.mp4 removed from playlist
4.mp4.html is deleted
4.mp4 removed from playlist
5.mp4.html is deleted
5.mp4 removed from playlist
6.mp4.html is deleted
6.mp4 removed from playlist
7.mp4.html is deleted
7.mp4 removed from playlist
8.mp4.html is deleted
8.mp4 removed from playlist
9.mp4.html is deleted
9.mp4 removed from playlist
戰狼1.mp4.html is deleted
戰狼1.mp4 removed from playlist
Clean Over
之後將mp4視頻文件複製到video文件夾下，執行腳本即可使用HTML播放器來播放mp4視頻。
使用Google的裏的插件[video speed control](https://github.com/igrigorik/videospeed) 可以對視頻進行設置快進倍率。
----------
以上內容對於熟悉HTML的可能十分簡單。鄙人只是突發想法，因此搗鼓這樣的內容，同時也在接觸shell編程，因此會使用到shell腳本來解決問題。
本文僅供簡單參考與自己的搗鼓過程記錄。如果對您有啓發或幫助，本人深感榮幸！！！