MuiPlayer实现兼容移动端的带弹幕视频播放器效果代码
代码语言:html
所属分类:多媒体
代码描述:MuiPlayer实现兼容移动端的带弹幕视频播放器效果代码,MuiPlayer 是一款 HTML5 视频播放插件,其默认配置了精美可操作的的播放控件,涉及了常用的播放场景,例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mui-player.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mui-player.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mui-player-mobile-plugin.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mui-player-desktop-plugin.min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/CommentCoreLibrary.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CommentCoreLibrary.min.js"></script> <script> var playerConfig = { container: '#mui-player', title: 'Your Title', src: '//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4', poster: '//repo.bfw.wiki/bfwrepo/image/5d653a6a2aea8.png', videoAttribute: [{ attrKey: 'webkit-playsinline', attrValue: '' }, { attrKey: 'playsinline', attrValue: '' }, { attrKey: 'x5-playsinline', attrValue: '' }, { attrKey: 't7-video-player-type', attrValue: 'inline' }, { attrKey: 'x5-video-player-type', attrValue: 'h5-page' }, { attrKey: 'x-webkit-airplay', attrValue: 'allow' }, { attrKey: 'controlslist', attrValue: 'nodownload' }, ], } var danmakuList = [{ "mode": 1, "text": "请画出受力分析(10分)", "stime": 200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 5, "text": "这风景太漂亮了吧~", "stime": 1000, "size": 25, "dur": 4000, "color": 0xFF0000 }, { "mode": 5, "text": "前方高能,建议反复观看!!", "stime": 1500, "size": 25, "dur": 4000, "color": 0xFFFF00 }, { "mode": 5, "text": "yee~~", "stime": 1700, "size": 25, "dur": 5000, "color": 0xFF0000 }, { "mode": 5, "text": "我要到这里走一走", "stime": 2500, "size": 36, "dur": 4000, "color": 0x00FF00 }, { "mode": 4, "text": "♥ MUIPLAYER.JS.ORG ♥", "stime": 3100, "size": 18, "dur": 5500, "color": 0xFF0000, }, { "mode": 4, "text": "Mui Player 一款优秀的 H5 视频播放器框架", "stime": 3000, "size": 25, "dur": 5500, "color": 0xFFFF00 }, { "mode": 1, "text": "姐姐记得给视频加中国的水印!!", "stime": 400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "水中贵足", "stime": 600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "我在地上踩都摔成狗", "stime": 800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "不会沉?", "stime": 1000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "China", "stime": 1200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "理论上可行实际上难度不低", "stime": 1600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "一苇渡江", "stime": 1800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万象", "stime": 2000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "我虽无意逐鹿,却知苍生苦楚", "stime": 2200, "size": 25, "dur": 7000, "color": 0xFF0000 }, { "mode": 1, "text": "练过,早说啊", "stime": 2400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "China", "stime": 2600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "China China", "stime": 2800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "China", "stime": 3000, "size": 25, "dur": 7000, "color": 0x9900FF }, { "mode": 1, "text": "天动万象", "stime": 3400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "啊啊,好美", "stime": 3600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万象", "stime": 3800, "size": 36, "dur": 7000, "color": 0x66FFFF }, { "mode": 1, "text": "哇哦这bgm", "stime": 4000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "把我整不会了", "stime": 4200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "小七孔?", "stime": 4400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "小脑壳好用", "stime": 4600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天赋", "stime": 4800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "求竹竿视觉", "stime": 5000, "size": 25, "dur": 7000, "color": 0xFFFF00 }, { "mode": 1, "text": "一苇渡江绝世风华", "stime": 5400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "china", "stime": 5800, "size": 25, "dur": 7000, "color": 0x66FFFF }, { "mode": 1, "text": "美美美", "stime": 6000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万象", "stime": 6200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "牛拉了", "stime": 6400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "太强了", "stime": 6600, "size": 25, "dur": 7000, "color": 0x66FFFF }, { "mode": 1, "text": "很厉害", "stime": 6800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "加水印的?", "stime": 7200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "只愿荡敌四方 换得浮生一隅", "stime": 7400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "钟离", "stime": 7600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "China", "stime": 8000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "一苇渡江原来是真的!", "stime": 8200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万相!!", "stime": 8400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "先学游泳", "stime": 8600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万象", "stime": 8800, "size": 25, "dur": 7000, "color": 0xFF0000 }, { "mode": 1, "text": "恭迎老祖", "stime": 9000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "嗯?", "stime": 9200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万象", "stime": 9400, "size": 25, "dur": 7000, "color": 0x00FF00 }, { "mode": 1, "text": "天动万象", "stime": 9600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万象", "stime": 9800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "厉害", "stime": 10000, "size": 25, "dur": 7000, "color": 0x00FF00 }, { "mode": 1, "text": "有没摔下水的,我看看", "stime": 10200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "牛", "stime": 10400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万象", "stime": 10600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "上回书说到", "stime": 10800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "上回书说到", "stime": 11000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万象!", "stime": 11200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "求拍摄视角", "stime": 11400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "China", "stime": 11600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "牛蛙", "stime": 12000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "吃呐", "stime": 12200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "万象天引", "stime": 12400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "万象天引", "stime": 12600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万象", "stime": 12800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "钟师傅:你们就没有属于自己的bug吗?(不好意思,还真没有)", "stime": 13000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "开头就一个尘世闲游", "stime": 13200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "我上竹子直接就沉了", "stime": 13400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "China", "stime": 13600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "应该要练很长时间吧", "stime": 13800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "哎呀", "stime": 14000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": ".", "stime": 14200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天动万象", "stime": 14400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "肯定失手过", "stime": 14600, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "独竹漂", "stime": 14800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "这居然是真实存在的", "stime": 15000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天,如履平地", "stime": 15400, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "China", "stime": 15600, "size": 25, "dur": 7000, "color": 0xFF0000 }, { "mode": 1, "text": "China", "stime": 15800, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "却知天下苦楚", "stime": 16000, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "我随无意逐鹿", "stime": 16200, "size": 25, "dur": 7000, "color": 0xffffff }, { "mode": 1, "text": "天 动 万 象", "stime": 16400, "size": 25, "dur": 7000, "color": 0xffffff }, { ".........完整代码请登录后点击上方下载按钮下载查看
网友评论0