文档章节

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

高处胜寒
 高处胜寒
发布于 2017/09/02 15:55
字数 772
阅读 273
收藏 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
博文 192
码字总数 144565
作品 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
20 款 jQuery 的音频和视频插件

Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器。可定制视频和相片,支持触摸操作,支持全屏播放等。 YoutubeTV: DEMO || DOWNLOAD 该插件...

oschina
2013/08/23
25.1K
12

没有更多内容

加载失败,请刷新页面

加载更多

使用JavaScript编写iOS应用业务逻辑

JSAUIKitCocoa使你可以使用JavaScript编写对性能要求不高但可能变动性很大的iOS应用的业务逻辑部分,View组件、需要多线程支持的Model等则直接使用原生对象。 编写方式与React Native相似,但...

neal01
8分钟前
0
0
艺术品区块链溯源防伪平台(连载一)

Netkiller Blockchain 手札 作者正在找工作,联系方式 13113668890 Mr. Neo Chan, 陈景峯(BG7NYT) 中国广东省深圳市望海路半岛城邦三期 518067 +86 13113668890 <netkiller@msn.com> 文档始创...

netkiller-
9分钟前
0
0
0032-如何在CDH启用Kerberos的情况下安装及使用Sentry(二)

温馨提示:要看高清无码套图,请使用手机打开并单击图片放大查看。 5.Sentry列权限管理 1.在集群所有节点添加fayson_r用户 [root@ip-172-31-6-148 cdh-shell-bak]# useradd fayson_r[root@i...

Hadoop实操
13分钟前
0
0
Nginx配置中Location的优先级

根据Nginx的官方文档,Location标签一共有四个修饰符,分别是: (1) =:表示完全匹配; (2) ^~:匹配URI的前缀,并且后面的正则表达式不再匹配,如果一个URI同时满足两个规则的话,匹配最长的规...

cloes
昨天
0
0
Xcode 10 Archive 卡死问题

前段时间贪新鲜更新了xcode 10,发现就是自己没事找事后悔啊........ 首先是 libstdc++.6.0.9.tbd 已不被使用,以前的项目是一顿报错!!!一个个改也不是办法还有一些第三方的用到只好把lib...

壹峰
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部