本人对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 设置视频播放器的高度

实现后的效果：（可播放与暂停、拖曳进度、全屏、下载，根据不同的浏览器显示的界面不同）

导航框架播放器

有一些网站存在有导航栏，点击导航栏中的链接，可以在另一侧的页面中显示出来详细内容。我们可以做出来一个视频列表，点击在右侧的视频链接后，在左侧的框架界面播放视频资源。实现后的效果如下： ![ 导航框架的HTML播放器](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwODIxMjEyMzU2MDA2?x-oss-process=image/format,png)

看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

<–以下是脚本添加的视频列表–>

直接将 zhanlang 超链接放在HTML标签外也能被浏览器解释。因此为了方便，在使用脚本更新播放列表时，直接添加在该HTML文件的末尾。

<h4>左侧播放窗口</h4>

video/default.html 默认播放页面，可通过autoplay属性设置视频是否自播放

htmlbofangqi

当前浏览器不支持video元素

``` 这里面在右侧导航栏里只有一个链接，当放置多个链接时，就编写对应视频的播放页面，并将其添加到playlist.html中，更新导航列表。（在这里本来是想要通过对一个default.html传参来播放对应的视频，但本人未找到参考资料，也不是十分熟悉html,只能采取笨方法）

脚本更新

脚本更新导航列表与创建对应视频资源的播放页面。本人使用的是Linux，因此使用shell脚本来辅助更新。（脚本编写简单，并没有太大技术含量，主要简便使用，并没有写的多严格与规范）

脚本源码

``` #！/bin/bash # version : 1 # 2017年 08月 21日星期一 12:42:35 CST

cd /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 in ls *.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

![这里写图片描述](https://img-blog.csdn.net/20170821221608604?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUVNfMDkyOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

清理

$ ./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

![ 导航框架的HTML播放器](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwODIxMjEyMzU2MDA2?x-oss-process=image/format,png)之后将mp4视频文件复制到video文件夹下，执行脚本即可使用HTML播放器来播放mp4视频。
使用Google的里的插件[video speed control](https://github.com/igrigorik/videospeed) 可以对视频进行设置快进倍率。----------
以上内容对于熟悉HTML的可能十分简单。鄙人只是突发想法，因此捣鼓这样的内容，同时也在接触shell编程，因此会使用到shell脚本来解决问题。
本文仅供简单参考与自己的捣鼓过程记录。如果对您有启发或帮助，本人深感荣幸！！！

导航框架式html播放器的实现以及导航栏的自动更新脚本实现相关推荐

易语言用多文件对话框写MP3播放器
利用多文件对话框和超级列表框,示范了一个本地MP3播放器. 视频链接: 511遇见易语言教程教程源码: .版本 2 .支持库 iext .支持库 xplib.程序集窗口程序集_启动窗口.子程序 _ ...
腾讯X5内核使用详解（X5内核播放器使用如何去除控制栏全屏播放）以及一些注意事项...
例子下载地址 https://www.lanzous.com/i2zsv5g GIT就不用了麻烦的不行本人安卓刚学就上X5内核弄了老长时间由于对maven 和idea不熟悉刚开始导包都是 ...
Vue实现仿音乐播放器4-Vue-router实现音乐导航菜单切换
效果实现 Vue Router 官方文档 https://router.vuejs.org/zh/guide/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...
C++ 制作简易音乐播放器
内容利用c++以及一些函数库制作一个简单的音乐播放器. 成果: 实现了:打开一个音频文件,播放音频,中途暂停或继续,停止换歌,滑动控制音量大小. 视频教程本人也是根据视频教程所学,内容相同.可点击 ...
教程:媒体播放器SKIN制作全攻略[原创]
因为不太知道怎样的教程比较合用,所以我想把这个教程做成互动式的,一部分一部分地放上来,大家可以对这篇文档提出自己的建议和要求,我根据大家的需求来改,目前拟定的目录如下: 微软媒体播放器SKIN制作教程 ...
Android搜索关键字飞入飞出效果(播放器的搜索界面)
好多应用在搜索界面都有关键字飞入飞出的效果.我自己也实现了下.先上效果图: 实现该效果需要解决以下五点: 1.布局的选用. 2.确定动画区域,即布局的宽高. 3.对关键字坐标的随机分配. 4.对随机分 ...
Android应用开发--MP3音乐播放器代码实现（二）
2013年5月25日简.美音乐播放器开发小巫在这里罗列这个播放器已经实现的功能: 1. 自动显示音乐列表 2. 点击列表播放音乐 3. 长按列表弹出对话框 4. 暂停音乐 5. ...
GL音乐播放器1.0.0版-- 总结帖
因为最近开学的缘故,我的文章更新也不那么迅速了,敬请大家谅解. 在家里曲曲折折的终于在计划里完成,现在想想那个过程,每天白天看别人的博客,百度,看书寻找自己想要的功能的实现方法,晚上开始写代码,因为自 ...
mac 平台显示歌词最好的音乐播放器软件 —— Vox + LyricsX
2018年10月更新: Vox + LyricsX 滚动歌词,显示歌词面板完美支持 iTunes, Spotify, Vox, 可随播放器启动自动搜索歌词.下载歌词(~/Music/LyricsX ...

导航框架式html播放器的实现以及导航栏的自动更新脚本实现