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