• 资源介绍
  • DPlayer是一款实用的HTML5视频播放器,可帮助人们轻松构建视频应用,播放器支持多种类型的视频格式播放,如mp4、m3u8等等,且支持直播模式,播放器应用代码如下,更多参数请参考开发文档。

    DPlayer开发文档

    DPlayer HTML5视频播放器开发实例插图实际应用代码:

    <!DOCTYPE html>
    <!-- 
     * 内核: DPlayer
     * 归属: 360模板吧
     * 网址: www.360mb.net
     * 创建: Dora - 2021.07.28
     * 修改: Dora - 2021.07.28
    -->
    <html lang="zh-CN">
    
    <head>
        <meta charset="utf-8">
        <meta name="referrer" content="always">
        <title>DPlayer播放器 - 让视频播放变得更简单</title>
        <meta name="keywords" content="DPlayer,播放器,m3i8">
        <meta name="description" content="DPlayer播放器 - 让视频播放变得更简单">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
    <style type="text/css">body, html, .dplayer{padding: 0;margin: 0;width: 100%;height: 100%;background-color:#000;}</style>
    </head>
    <body>
    <div id="dplayer"></div>
    <script src="https://lib.baomitu.com/hls.js/8.0.0-beta.3/hls.js"></script>
    <script src="https://lib.baomitu.com/dplayer/1.26.0/DPlayer.min.js"></script>
    <script>
    
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
    	live: false,//是否开启直播
        autoplay: false,//视频自动播放
        theme: '#FADFA3',//主题色
        loop: true,//视频循环播放
        lang: 'zh-cn',//可选值: 'en', 'zh-cn', 'zh-tw'
        screenshot: false,//开启截图,如果开启,视频和视频封面需要允许跨域
        hotkey: true,//开启热键,支持快进、快退、音量控制、播放暂停
    	airplay: true,	//在 Safari 中开启 AirPlay
        preload: 'auto',//视频预加载,可选值: 'none', 'metadata', 'auto'
        logo: '',//logo
        volume: 0.7,//默认音量
        mutex: true,//互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
        video: {
            url: 'https://cctvtxyh5ca.liveplay.myqcloud.com/live/cctv13_2/index.m3u8',
            pic: 'dplayer.png',
            thumbnails: 'thumbnails.jpg',
            type: 'auto',
        },
        subtitle: {
            url: 'dplayer.vtt',
            type: 'webvtt',
            fontSize: '25px',
            bottom: '10%',
            color: '#b7daff',
        },
        danmaku: {//弹幕参数
            id: '9E2E3368B56CDBB4',
            api: 'https://api.prprpr.me/dplayer/',
            token: 'tokendemo',
            maximum: 1000,
            addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
            user: 'DIYgod',
            bottom: '15%',
            unlimited: true,
        },
        contextmenu: [//自定义右键菜单
            {
                text: '360模板吧',
                link: 'https://www.360mb.net',
            },
            {
                text: '浪潮解析',
                link: 'https://www.360mb.net',
            },
        ],
        highlight: [//自定义进度条提示点
            {
                time: 120,
                text: '这是第 20 秒',
            },
            {
                time: 320,
                text: '这是 2 分钟',
            },
        ],
    });
    </script>
    </body>
    </html>
    

     

     

    喜欢 0
    1. 本站所有源码、模板、插件等其他资源,都不包含免费技术服务请大家谅解!
    2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
    3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
    4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
    5. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考《退款规则》!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!

    360模板吧 » DPlayer HTML5视频播放器开发实例

    发表评论