视频功能播放测试

1.DPlayer

代码：

<div id="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'http://pan.vxoo.top/?/MMD/Drezal%2018%E5%A5%971080P%EF%BC%88%E8%99%AB%E5%A5%B8%EF%BC%89/%5BBeat%20and%20Sex%5D%20Haku%20with%20InsectS%20Vol.1%5B1080P60fps%5D.mp4',
    },
});

<div id="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    lang: 'zh-cn',
    screenshot: true,
    hotkey: true,
    preload: 'auto',
    logo: 'logo.png',
    volume: 0.7,
    mutex: true,
    video: {
        url: 'dplayer.mp4',
        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: 'custom1',
            link: 'https://github.com/DIYgod/DPlayer',
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            },
        },
    ],
    highlight: [
        {
            time: 20,
            text: '这是第 20 秒',
        },
        {
            time: 120,
            text: '这是 2 分钟',
        },
    ],
})

<div id="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [
            {
                name: 'HD',
                url: 'demo.m3u8',
                type: 'hls',
            },
            {
                name: 'SD',
                url: 'demo.mp4',
                type: 'normal',
            },
        ],
        defaultQuality: 0,
        pic: 'demo.png',
        thumbnails: 'thumbnails.jpg',
    },
});

<video class="dplayer-video dplayer-video-current" webkit-playsinline="" x-webkit-airplay="allow" playsinline="" poster="https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png" crossorigin="anonymous" preload="auto" src="https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&amp;userId=17&amp;ext=.mp4">
    
    <track kind="metadata" default="" src="https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt">
    
</video>

2.iframe

视频播放测试1：

测试2：

代码：

3.embed

测试1：

代码：

<embed height="415" width="544" quality="high" allowfullscreen="true" type="application/x-shockwave-flash" src="//static.hdslb.com/miniloader.swf" flashvars="aid=8506694&page=1" pluginspage="//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"></embed>

js标签示例

<script type="text/javascript" src="http://www.xiami.com/widget/player-single?uid=32329501&sid=1776238762&mode=js"></script>

<head> <link href="https://vjs.zencdn.net/7.8.3/video-js.css" rel="stylesheet" />  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> </head> <body> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="https://i.loli.net/2020/04/25/JIEc5UGVSmzDONl.jpg" data-setup="{}" > <source src="https://api.dogecloud.com/player/get.mp4?vcode=103e1fa35a8df311&userId=914&flsign=8473765b0695cf41dc6a4d6e562d3149&ext=.mp4" type="video/mp4" /> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank" >supports HTML5 video</a > </p> </video> <script src="https://vjs.zencdn.net/7.8.3/video.js"></script> </body>

代码：

<head>
  <link href="https://vjs.zencdn.net/7.8.3/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="https://i.loli.net/2020/04/25/JIEc5UGVSmzDONl.jpg"
    data-setup="{}"
  >
    <source src="https://api.dogecloud.com/player/get.mp4?vcode=103e1fa35a8df311&userId=914&flsign=8473765b0695cf41dc6a4d6e562d3149&ext=.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.8.3/video.js"></script>
</body>

另外，我们可以修改CSS的样式

<!-- Video.js base CSS -->
<link href="https://unpkg.com/video.js@7/dist/video-js.min.css" rel="stylesheet">

<!-- City -->
<link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet">

<!-- Fantasy -->
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet">

<!-- Forest -->
<link href="https://unpkg.com/@videojs/themes@1/dist/forest/index.css" rel="stylesheet">

<!-- Sea -->
<link href="https://unpkg.com/@videojs/themes@1/dist/sea/index.css" rel="stylesheet">

此外，还有很棒的插件功能，

5.

通用

iframe：

参考链接：

配置项

在博文中优雅的嵌入视频（基于Django）

posted @ 2020-07-11 10:25 古客阅读(1070) 评论(0) 收藏举报

刷新页面返回顶部

古客

视频功能播放测试

1.DPlayer

2.iframe

3.embed

4.videojs

5.

公告