本人对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
属性 值 描述 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。 poster url 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 autoplay autoplay 设置视频播放器的宽度 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 src url 要播放的视频的 URL。 height pixels 如果出现该属性，则视频在就绪后马上播放。 width pixels 设置视频播放器的高度
实现后的效果：（可播放与暂停、拖曳进度、全屏、下载，根据不同的浏览器显示的界面不同）
导航框架播放器
有一些网站存在有导航栏，点击导航栏中的链接，可以在另一侧的页面中显示出来详细内容。 我们可以做出来一个视频列表，点击在右侧的视频链接后，在左侧的框架界面播放视频资源。实现后的效果如下： 看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 # 08月 21日 星期一 12:42:35 CSTcd /home/qi/soft-install/tomcat/webapps/ROOT/video || {
echo "can not open the contents "
exit 1
}
case 1 i n h t m l ) f o r i i n ‘ l s ∗ . m p 4 ‘ d o e c h o " < l i > < a h r e f = " . / v i d e o / 1 in html ) for i in `ls *.mp4` do echo "<li><a href="./video/ 1inhtml)foriin‘ls∗.mp4‘doecho"<li><ahref="./video/{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 . h t m l e c h o " {i}.html echo " i.htmlecho"{i}.html Create Over"
done
;;
clean )
for i inls *.mp4
do
rm -rf i . h t m l e c h o " {i}.html echo " i.htmlecho"{i}.html is deleted"
sed -in “s/^.* i . ∗ / / " . . / p l a y l i s t . h t m l e c h o " {i}.*//" ../playlist.html echo " i.∗//"../playlist.htmlecho"{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](/igrigorik/videospeed) 可以对视频进行设置快进倍率。----------以上内容对于熟悉HTML的可能十分简单。鄙人只是突发想法，因此捣鼓这样的内容，同时也在接触shell编程，因此会使用到shell脚本来解决问题。本文仅供简单参考与自己的捣鼓过程记录。如果对您有启发或帮助，本人深感荣幸！！！
