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

来源：互联网发布：淘宝网刷流量编辑：程序博客网时间：2024/05/22 14:52

本人对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

属性值描述autoplayautoplay 如果出现该属性，则视频在就绪后马上播放。posterurl 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。autoplayautoplay 设置视频播放器的宽度controlscontrols 如果出现该属性，则向用户显示控件，比如播放按钮。srcurl 要播放的视频的 URL。heightpixels 如果出现该属性，则视频在就绪后马上播放。widthpixels 设置视频播放器的高度

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

导航框架播放器

有一些网站存在有导航栏，点击导航栏中的链接，可以在另一侧的页面中显示出来详细内容。
我们可以做出来一个视频列表，点击在右侧的视频链接后，在左侧的框架界面播放视频资源。实现后的效果如下：
导航框架的HTML播放器

看w3school上的关于frame的内容里关于导航框架示例看的迷迷糊糊的，总感觉缺少一些说明。这里直接贴代码，然后再说明：

首页

# index.html:首页将浏览器分为左右两侧，左侧我们播放视频资源，右侧放置视频列表<html>    <meta charset="UTF-8">    <frameset cols="85%,15%">        <frame name="left_frame" id="left_frame"  src="./video/default.html">        <frame  name="right_frame" id="right_frame" src="playlist.html" >    </frameset></html>

右侧导航栏

# playlist.html :<!DOCTYPE html><html><head>    <title></title>        <meta charset="UTF-8">        <style >        body{background-color: #F8F8FF; }        </style></head><body><ol><li><a href="./video/default.html" target="left_frame" > zhanlang </a></li></ol></body></html><--以下是脚本添加的视频列表--># 直接将<a href="./video/default.html" target="left_frame" > zhanlang </a></li>超链接放在HTML标签外也能被浏览器解释。因此为了方便，在使用脚本更新播放列表时，直接添加在该HTML文件的末尾。

左侧播放窗口

# video/default.html 默认播放页面，可通过autoplay属性设置视频是否自播放<!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>

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

脚本更新

脚本更新导航列表与创建对应视频资源的播放页面。
本人使用的是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 $1 in     html )         for i in `ls *.mp4`         do            echo "<li><a href="./video/${i}" target="left_frame" > ${i} </a></li> " >> ../playlist.html            touch ${i}.html            cat default.html >> ${i}.html            sed -i "15c src=\"${i}\"" ${i}.html            echo "${i}.html Create Over"        done         ;;    clean )        for i  in `ls *.mp4`        do            rm -rf ${i}.html            echo "${i}.html is deleted"            sed -in "s/^.*${i}.*//" ../playlist.html            echo "${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

脚本测试

在video下创建大量的MP4文件：

$  for i in {1..10}; do  touch $i.mp4; done  #创建十个以mp4结尾的文件进行测试$ ll总用量 760204drwxr-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.bakdrwxr-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 html10.mp4.html Create Over1.mp4.html Create Over2.mp4.html Create Over3.mp4.html Create Over4.mp4.html Create Over5.mp4.html Create Over6.mp4.html Create Over7.mp4.html Create Over8.mp4.html Create Over9.mp4.html Create Over战狼1.mp4.html Create Over

这里写图片描述

# 清理$ ./create.sh clean 10.mp4.html is deleted10.mp4 removed from playlist1.mp4.html is deleted1.mp4 removed from playlist2.mp4.html is deleted2.mp4 removed from playlist3.mp4.html is deleted3.mp4 removed from playlist4.mp4.html is deleted4.mp4 removed from playlist5.mp4.html is deleted5.mp4 removed from playlist6.mp4.html is deleted6.mp4 removed from playlist7.mp4.html is deleted7.mp4 removed from playlist8.mp4.html is deleted8.mp4 removed from playlist9.mp4.html is deleted9.mp4 removed from playlist战狼1.mp4.html is deleted战狼1.mp4 removed from playlistClean Over

导航框架的HTML播放器

之后将mp4视频文件复制到video文件夹下，执行脚本即可使用HTML播放器来播放mp4视频。
使用Google的里的插件video speed control 可以对视频进行设置快进倍率。

以上内容对于熟悉HTML的可能十分简单。鄙人只是突发想法，因此捣鼓这样的内容，同时也在接触shell编程，因此会使用到shell脚本来解决问题。
本文仅供简单参考与自己的捣鼓过程记录。如果对您有启发或帮助，本人深感荣幸！！！

阅读全文

0 0