简易html视频播放器

文件列表

root@tianshl:/data/video# ls
hch.mp4     test.mp4    xyx.mp4   index.html  video.list  jquery.js

index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style type="text/css">body{text-align: center;}#content-wrap{margin-top: 50px;display: inline-block;}#content{display: flex;}/* 播放器 */#video{display: inline-block;margin: 0;border: 12px solid #eee;box-sizing: border-box;}.video-list-wrap{background-color: #eee;border-right: 1px solid #fff;}/* 视频列表 */.video-list{display: inline-block;box-sizing: border-box;margin: 0;width: 150px;list-style: none;padding: 0;overflow: auto;font-size: 12px;}/* 列表项 */.video-item{cursor: pointer;width: 150px;box-sizing: border-box;text-align: left;padding: 5px 0 5px 10px;}.video-item:not(:last-child){border-bottom: 1px solid #fff;}.video-item:hover, .active{background-color: #ddd;color: #333;}/* 视频列表标题 */.video-title{background-color: gainsboro;font-size: 12px;height: 30px;line-height: 30px;text-align: center;}</style></head><body><div id="content-wrap"><div id="content"><div class="video-list-wrap"><p class="video-title">视频列表</p><ul class="video-list"></ul></div></div></div></body><script type="text/javascript" src="./jquery.js"></script><script type="text/javascript">$(function(){var $content = $('#content');// 初始化播放器var init = function(src){var $video = $('<video id="video" controls>');$video.attr('preload', 'auto');$video.attr('width', 720).attr('height', 405);$video.attr('autoplay', 'autoplay');$video.append($('<source>').attr('src', src).attr('type', 'video/mp4'));$content.append($video);};/* 获取视频列表 */var $video_list = $('.video-list');$video_list.css('height', 340);$.ajax({url: "video.list",type: "GET",async: true,success: function(resp){$.each(resp.split('\n'), function(idx, item){if (item === '') return;var $p = $('<li>').addClass('video-item');$p.text(item);$p.data('path', item);$video_list.append($p);});}});init();/* 切换视频 */$video_list.on('click', '.video-item', function(){$("#video").remove();var $this = $(this);$this.parent().find('.active').removeClass('active');$this.addClass('active');init($this.data('path'));});})</script>
</html>

video.list

# 该目录下的所有MP4文件, 供jQuery解析
root@tianshl:/data/video# ls *.mp4 > video.list

nginx配置

user root;
worker_processes  1;
events {worker_connections  1024;
}
http {include       mime.types;sendfile        on;keepalive_timeout  65;server {listen       8000;server_name  本机IP;location / {# 前两行是认证(可不加)auth_basic "secret";auth_basic_user_file /usr/local/nginx/passwd.db;# 路径root /data/video;# 首页index index.html;}}
}

界面展示

http://localhost:8000

认证

播放器

简易html视频播放器相关推荐

简易网络视频播放器android
简易网络视频播放器android demo: Qvod 1.新建: app\src\main\res\xml\network_security_config.xml 作用是可以发送 http请求 &l ...
H5实现一个简易本地视频播放器
注:本例子没有涉及到数据库,是纯前端实现的要点介绍 video标签是html5新增的一个标签,用于视频播放,在W3C官方文档可以查到它的相关方法,属性和时间,此处我大致介绍一下我用到的一些: 1,方 ...
基于QT实现简易音视频播放器
目录: 一.界面布局二.播放本地音频 2.1 打开本地音频保存路径 2.2 选中想要播放的音频加入到播 ...
视觉媒体通信作业记录(一) 简易yuv420视频播放器
作业要求编程实现YUV420格式视频(无压缩)播放器输入:YUV420格式视频关键技术:视频源格式.视频显示格式.格式转换 yuv420格式视频下载地址链接: http://trace.eas ...
html页面实现视频播放器,实现简易html视频播放器的方法
body{ text-align: center; } #content-wrap{ margin-top: 50px; display: inline-block; } #content{ disp ...
java视频播放器制作_java创建简易视频播放器
java创建简易视频播放器发布时间:2020-09-23 04:28:09 来源:脚本之家阅读:98 作者:南柯一梦xihe 最近有个多媒体的作业,要求使用visualC++和OpenCV编写一个 ...
【Java】简易视频播放器
[效果图] [功能] 1.当窗口获取焦点后,按空格暂停/播放 2.原速播放键.暂停/播放键.倍速播放键(最高3倍速,每次递增0.5) 3.进度条可点击选择播放位置 4.时间显示.播放速度显示 [项目与 ...
PyQt5：简易视频播放器
本文旨在介绍如何使用PyQt5制作简易的视频播放器 ps:有些网友也许会遇到只能播放avi格式视频,而mp4等格式无法播放的问题(DirectShowPlayerService::doRender: ...
【Harmony OS】【ArkUI】ets开发简易视频播放器
前言:这一次我们来使用ets的Swiper组件.List组件和Video组件制作一个简易的视频播放器.本篇是以HarmonyOS官网的codelab简易视频播放器(eTS)为基础进行编写.本篇最主要的 ...

简易html视频播放器

文件列表

index.html

video.list

nginx配置

界面展示

认证

播放器

简易html视频播放器相关推荐

最新文章

热门文章