plyr/video.js视频播放器测试实例
plyr/video.js视频播放器测试实例
高处胜寒 发表于4个月前
plyr/video.js视频播放器测试实例
  • 发表于 4个月前
  • 阅读 63
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>小雨在线-开发测试</title>


    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/plyr.css">

    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>


<div id="test"></div>



<div class="container">


    <video id="v" poster="./pic.jpg" controls crossorigin>
        <!-- Video files -->
        <source src="http://1253326750.vod2.myqcloud.com/2b8e2321vodgzp1253326750/54f4ff6b9031868223182765357/f0.mp4"
                type="video/mp4">
        <!-- Fallback for browsers that don't support the <video> element -->
        <!--<a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>-->
    </video>


    <div class="actions">
        <button type="button" class="btn js-play">Play</button>
        <button type="button" class="btn js-pause">Pause</button>
        <button type="button" class="btn js-stop">Stop</button>
        <button type="button" class="btn js-rewind">Rewind</button>
        <button type="button" class="btn js-forward">Forward</button>
    </div>
</div>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="./js/plyr.js"></script>


<script>
    (function () {


        var controls = ["<div class='plyr__controls'>",
            "<button type='button' data-plyr='restart'>",
            "<svg><use xlink:href='#plyr-restart'></use></svg>",
            "<span class='plyr__sr-only'>Restart</span>",
            "</button>",
            "<button type='button' data-plyr='rewind'>",
            "<svg><use xlink:href='#plyr-rewind'></use></svg>",
            "<span class='plyr__sr-only'>Rewind {seektime} secs</span>",
            "</button>",
            "<button type='button' data-plyr='play'>",
            "<svg><use xlink:href='#plyr-play'></use></svg>",
            "<span class='plyr__sr-only'>Play</span>",
            "</button>",
            "<button type='button' data-plyr='pause'>",
            "<svg><use xlink:href='#plyr-pause'></use></svg>",
            "<span class='plyr__sr-only'>Pause</span>",
            "</button>",
            "<button type='button' data-plyr='fast-forward'>",
            "<svg><use xlink:href='#plyr-fast-forward'></use></svg>",
            "<span class='plyr__sr-only'>Forward {seektime} secs</span>",
            "</button>",
            "<span class='plyr__progress'>",
            "<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
            "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
            "<progress class='plyr__progress--played' max='100' value='0' role='presentation'></progress>",
            "<progress class='plyr__progress--buffer' max='100' value='0'>",
            "<span>0</span>% buffered",
            "</progress>",
            "<span class='plyr__tooltip'>00:00</span>",
            "</span>",
            "<span class='plyr__time'>",
            "<span class='plyr__sr-only'>Current time</span>",
            "<span class='plyr__time--current'>00:00</span>",
            "</span>",
            "<span class='plyr__time'>",
            "<span class='plyr__sr-only'>Duration</span>",
            "<span class='plyr__time--duration'>00:00</span>",
            "</span>",
            "<button type='button' data-plyr='mute'>",
            "<svg class='icon--muted'><use xlink:href='#plyr-muted'></use></svg>",
            "<svg><use xlink:href='#plyr-volume'></use></svg>",
            "<span class='plyr__sr-only'>Toggle Mute</span>",
            "</button>",
            "<span class='plyr__volume'>",
            "<label for='volume{id}' class='plyr__sr-only'>Volume</label>",
            "<input id='volume{id}' class='plyr__volume--input' type='range' min='0' max='10' value='5' data-plyr='volume'>",
            "<progress class='plyr__volume--display' max='10' value='0' role='presentation'></progress>",
            "</span>",
            "<button type='button' data-plyr='captions'>",
            "<svg class='icon--captions-on'><use xlink:href='#plyr-captions-on'></use></svg>",
            "<svg><use xlink:href='#plyr-captions-off'></use></svg>",
            "<span class='plyr__sr-only'>Toggle Captions</span>",
            "</button>",
            "<button type='button' data-plyr='fullscreen'>",
            "<svg class='icon--exit-fullscreen'><use xlink:href='#plyr-exit-fullscreen'></use></svg>",
            "<svg><use xlink:href='#plyr-enter-fullscreen'></use></svg>",
            "<span class='plyr__sr-only'>Toggle Fullscreen</span>",
            "</button>",
            "</div>"].join("");


        // This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
        // e.g. just plyr.setup(); and leave it at that if you have no need for events
        var instances = plyr.setup({
            // Output to console
            debug: true,
            html: controls,
            i18n: {
                restart: "Restart",
                rewind: "Rewind {seektime} secs",
                play: "Play",
                pause: "Pause",
                forward: "Forward {seektime} secs",
                buffered: "buffered",
                currentTime: "Current time",
                duration: "Duration",
                volume: "Volume",
                toggleMute: "Toggle Mute",
                toggleCaptions: "Toggle Captions",
                toggleFullscreen: "Toggle Fullscreen"
            },
            tooltips: {controls: true, seek: true},
            keyboardShortcuts:{ focused: true, global: true },
            title:'这是测试的标题'
        });



        // Get an element
        function get(selector) {
            return document.querySelector(selector);
        }

        // Custom event handler (just for demo)
        function on(element, type, callback) {
            if (!(element instanceof HTMLElement)) {
                element = get(element);
            }
            element.addEventListener(type, callback, false);
        }

        // Loop through each instance
        instances.forEach(function (instance) {
            // Play
            on('.js-play', 'click', function () {
                instance.play();
               // $("#test").html(instance.getContainer());

            });

            // Pause
            on('.js-pause', 'click', function () {
                instance.pause();
            });

            // Stop
            on('.js-stop', 'click', function () {
                instance.stop();
            });

            // Rewind
            on('.js-rewind', 'click', function () {
                instance.rewind();
            });

            // Forward
            on('.js-forward', 'click', function () {
                instance.forward();
            });

                //播放结束事件

            instance.on('ended', function(event) {
                var instance = event.detail.plyr;

                console.log(instance.get());
            });

        });





    })();

</script>


</body>
</html>

 

参考资料:

https://github.com/sampotts/plyr

https://plyr.io/

http://videojs.com/

https://github.com/videojs/video.js

 

共有 人打赏支持
粉丝 5
博文 80
码字总数 63272
×
高处胜寒
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: