站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: HTML超链接a标签_动力节点Java学院整理
搜索:
您的位置: 主页 > 教程 > 网页设计 > HTML > » 正文

实现简易html视频播放器的方法

来源: 易采站长站

本文介绍了实现简易html视频播放器的方法,分享给大家,具体如下:

文件列表

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

index.html

Tags:
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -
<!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>