MuiPlayer实现兼容移动端的带弹幕视频播放器效果代码-html代码-BFW代码库

代码语言：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&.........完整代码请登录后点击上方下载按钮下载查看