文档章节

plyr/video.js视频播放器测试实例

高处胜寒
 高处胜寒
发布于 2017/09/02 15:55
字数 772
阅读 298
收藏 0
<!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

 

© 著作权归作者所有

共有 人打赏支持
高处胜寒
粉丝 7
博文 196
码字总数 145317
作品 0
西安
程序员
私信 提问
jQuery 视频插件--video.js

Video.js 是一个开源的 Html5 jquery 视频插件,这个插件可以用来处理 Flash 视频,它还是一个多平台支持的产品。Moreover,YouTube,Vimeo 等等的视频都可以很好地通过这个插件来播放。这个...

sikkx
2015/06/10
31.1K
2
Video.js 5.17.0 发布,HTML5&Flash 视频播放器

Video.js 5.17.0 发布了,Video.js 是开源的 HTML5&Flash 视频播放器。还支持 YouTube 和 Vimeo(通过插件)。 可在台式机和移动设备上播放视频。 更新内容: Bug 修复 修复由于未删除的跟踪...

王练
2017/02/10
1K
4
HTML5视频播放插件Video.js使用详解

一、Video.js简介 Video.js 是一个开源的 Html5 jquery 视频插件,这个插件可以用来处理 Flash 视频,它还是一个多平台支持的产品。 Moreover,YouTube,Vimeo 等等的视频都可以很好地通过这...

tinywan1227
2016/09/18
0
0
html5的video的封面poster图片填充

html5支持视频播放,而且趋势,facebook也全面切换到html5了,最近做一个简单的视频播放器,测试了好多jplayer,video.js之类的都觉得不太好,所以自己写一个最简单的,不过发现了一个问题,...

豆花饭烧土豆
2016/10/20
232
0
混合 P2P-CDN 的流媒体播放器--PearPlayer.js

PearPlayer.js 一个支持多协议,多源、混合 P2P-CDN 的流媒体播放器 PearPlayer(梨享播放器) 是完全用 JavaScript 写的开源 HTML5 流媒体播放框架,实现了融合 HTTP(包含HTTPS、HTTP2)、...

snowinszut
2017/07/07
8.4K
23

没有更多内容

加载失败,请刷新页面

加载更多

阿里大规模数据中心性能分析

郭健美,阿里巴巴高级技术专家,目前主要从事数据中心的性能分析和软硬件结合的性能优化。CCF 系统软件专委和软件工程专委的委员。曾主持国家自然科学基金面上项目、入选上海市浦江人才计划A...

阿里云官方博客
44分钟前
1
0
Coding and Paper Letter(四十四)

资源整理。 1 Coding: 1.Rstudio2019年会“机器学习应用”的幻灯片,代码和数据 rstudio conf 2019 2.R语言包sparkxgb,Spark上XGBoost的R接口。 sparkxgb 3.自动SQL注入和数据库接管工具。 ...

胖胖雕
46分钟前
3
0
Ubuntu最新的主要操作系统放弃32位支持?

现在是2018年,2019年即将到来——64位处理器已经成为主流很长一段时间了。如果你仍然使用32位的电脑,那么是时候把它扔进垃圾箱了。 我为所有基于Linux的操作系统维护者感到自豪,他们有勇气...

Linux就该这么学
47分钟前
1
0
Fundebug发布Vue插件,简化BUG监控接入代码

摘要: 代码越短越好! 我们发布了fundebug-vue插件,可以简化Vue框架接入Fundebug的代码。 Vue如何接入Fundebug 1. 安装fundebug-javascript与fundebug-vue npm install fundebug-javascrip...

Fundebug
54分钟前
2
0
MySQL学习笔记之二

数据库的操作总结就是:增删改查(CURD),今天记录一下基础的检索查询工作。 检索MySQL 1.查询表中所有的记录 mysql> select * from apps;+----+------------+-----------------------+------...

凌宇之蓝
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部