名师工作室建设名师网站,二级建造师报名官网,网站图片移动怎么做,国外设计网站参考简单版本视频播放服务器V4
前一个版本内容#xff0c;可以查看
https://blog.csdn.net/wtt234/article/details/131759154
优化内容#xff1a;
1.返回列表的优化#xff0c;优化了原来返回空列表名称的问题
2.前端才有layui优化内容 后端#xff1a;
package mainim…简单版本视频播放服务器V4
前一个版本内容可以查看
https://blog.csdn.net/wtt234/article/details/131759154
优化内容
1.返回列表的优化优化了原来返回空列表名称的问题
2.前端才有layui优化内容 后端
package mainimport (fmtio/ioutilnet/httpospathstringsgithub.com/gin-gonic/gin
)// 这个代码在windowslinux中都是可以使用这里重点关注的就是
//
// videos : fmt.Sprintf(%s/%s, ml, videos) 这样设置 windows linux都是可以使用
//
// 实现遍历程序的当前目录videos下的文件
func ListDir() ([]string, error) {ml, _ : os.Getwd()videos : fmt.Sprintf(%s/%s, ml, videos)infos, err : ioutil.ReadDir(videos)if err ! nil {return nil, err}//names : make([]string, len(infos)) 这里容易有问题names : make([]string, 0)for _, info : range infos {//获取文件名 确认以*MP4结尾的放入切片中filename : info.Name()//fmt.Printf(name:%v,kind:%T\n, filename, filename)把layui的包文件过滤掉,里面有cssjs文件等//if filename layui {// continue//}//fmt.Printf(name%v,type:%T, filename, filename)isbool : strings.HasSuffix(filename, .mp4)if isbool {//if filename//优化的地方如果不优化的话返回的slcie中会有空“文件名”的出现//names[i] info.Name()names append(names, filename)}}fmt.Printf(%s%d, names, len(names))//fmt.Printf(is:%v, names)return names, nil
}func ListDirllinux() ([]string, error) {ml, _ : os.Getwd()videos : fmt.Sprintf(%s//%s, ml, videos)infos, err : ioutil.ReadDir(videos)if err ! nil {return nil, err}names : make([]string, len(infos))for i, info : range infos {//获取文件名 确认以*MP4结尾的放入切片中filename : info.Name()//fmt.Println(filename)if strings.HasSuffix(filename, .mp4) {//if filenamenames[i] info.Name()}}return names, nil
}// 文件下载功能实现
func DowFile(c *gin.Context) {//通过动态路由方式获取文件名以实现下载不同文件的功能name : c.Param(name)//拼接路径,如果没有这一步则默认在当前路径下寻找filename : path.Join(./videos, name)//响应一个文件c.File(filename)return
}func main() {r : gin.Default()r.LoadHTMLGlob(templates/*)// 初始化默认静态资源r.StaticFS(/videos, http.Dir(./videos))//windows 和linux下的路径稍微不同names, _ : ListDir()//names, _ : ListDirllinux()r.GET(/index, func(c *gin.Context) {//c.HTML(http.StatusOK, index.html, gin.H{names: names})//c.HTML(http.StatusOK, index.html, gin.H{names: names})c.HTML(http.StatusOK, layui_index.html, gin.H{names: names})//c.HTML(http.StatusOK, index_lab.html, gin.H{names: names})})r.GET(/GetFile/:name, DowFile)//r.Run()r.Run(0.0.0.0:8080)
}前端
!DOCTYPE html
html
headmeta charsetutf-8title视频播放/titlemeta namerenderer contentwebkitmeta http-equivX-UA-Compatible contentIEedge,chrome1meta nameviewport contentwidthdevice-width, initial-scale1link relstylesheet href/videos/layui/css/layui.cssscript src/videos/layui/layui.js/script!-- 在移动端和PC端自动设置div的宽度和高度可以使用CSS media --style/* 在移动端设置div的宽度和高度 */media screen and (max-width: 767px) {#video {width: 100%;height: 300px;}}/* 在PC端设置div的宽度和高度 */media screen and (min-width: 768px) {#video {width: 800px;height: 600px;}}/style
/head
body
div classlayui-layout layui-layout-admindiv classlayui-headerdiv classlayui-logo layui-hide-xs layui-bg-black播放器/div!-- 头部区域可配合layui 已有的水平导航 --ul classlayui-nav layui-layout-left!-- 移动端显示 --li classlayui-nav-item layui-show-xs-inline-block layui-hide-sm lay-header-eventmenuLefti classlayui-icon layui-icon-spread-left/i/li/ulul classlayui-nav layui-layout-right/ul/divdiv classlayui-side layui-bg-blackdiv classlayui-side-scroll!-- 左侧导航区域可配合layui已有的垂直导航 --ul classlayui-nav layui-nav-tree lay-filtertestli classlayui-nav-item layui-nav-itemeda class hrefjavascript:;播放列表/a{{range $index,$v : .names}}dl classlayui-nav-childdda hrefjavascript:; onclickchangeVideo({{$v }}, {{$v }}){{$v }}/a/dd/dl{{end}}/li/ul/div/divdiv classlayui-body!-- 内容主体区域 --div stylepadding: 15px;!-- blockquote classlayui-elem-quote layui-textLayui 框体布局内容主体区域/blockquote --div classlayui-card layui-panel!-- div classlayui-card-header下面是充数内容为的是出现滚动条/div --div classlayui-card-body
!-- video srcmovie.ogg controlscontrols height800px--
!-- video idvideo width800 height600 controlscontrols srchttp://10.72.1.241:8080/GetFile/a1.mp4--
!-- typevideo/ogg/video/br--video idvideo controlscontrols srchttp://10.72.1.241:8080/GetFile/a1.mp4typevideo/ogg/video/video/div/divbrbr/div/div/div --
/div!--script src//cdn.staticfile.org/layui/2.8.11/layui.js/script--
!--script src/videos/layui/layui.js/script--
scriptfunction changeVideo(source, title) {video.src http://10.72.1.241:8080/GetFile/ source;// video.play();// 更新选中状态和标题playlistItems.forEach(function(item) {item.classList.remove(active);});event.target.classList.add(active);document.title title;}//JSlayui.use([element, layer, util], function(){var element layui.element;var layer layui.layer;var util layui.util;var $ layui.$;//头部事件util.event(lay-header-event, {menuLeft: function(othis){ // 左侧菜单事件layer.msg(展开左侧菜单的操作, {icon: 0});},});});
/script
/body
/html 优化slice 界面优化
