文档章节

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

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

 

© 著作权归作者所有

共有 人打赏支持
高处胜寒
粉丝 5
博文 83
码字总数 78931
作品 0
西安
程序员
jQuery 视频插件--video.js

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

sikkx ⋅ 2015/06/10 ⋅ 2

Video.js 5.17.0 发布,HTML5&Flash 视频播放器

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

王练 ⋅ 2017/02/10 ⋅ 4

HTML5视频播放插件Video.js使用详解

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

tinywan1227 ⋅ 2016/09/18 ⋅ 0

html5的video的封面poster图片填充

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

豆花饭烧土豆 ⋅ 2016/10/20 ⋅ 0

关于HLS直播流H5页面播放解决

在最近的项目开发中,涉及了HLS直播音频流的播放,关于网上的资料较多,各种混杂,因此对此在问题解决尝试以及结果进行总结。 什么是HLS 首先,什么是HLS? HTTP Live Streaming(缩写是HLS...

小浊微清 ⋅ 2017/11/09 ⋅ 0

20 款 jQuery 的音频和视频插件

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

oschina ⋅ 2013/08/23 ⋅ 12

混合 P2P-CDN 的流媒体播放器--PearPlayer.js

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

snowinszut ⋅ 2017/07/07 ⋅ 23

jQuery 视频插件--Bigvideo.js

BigVideo.js 是一个 jQuery 视频插件,能让用户很方便将视频作为网站的背景。它可以播放一个无声视频(或一系列视频),或者像播放器一样提供一个视频列表给用户,让他们选择喜欢的进行播放。...

叶秀兰 ⋅ 2014/01/16 ⋅ 1

HTML5 多媒体播放器--Plyr

Plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体播放器。支持自定义的播放控制和 WebVTT 字幕。 特性: 可访问性 - 完全支持字幕和屏幕阅读器 轻量级 - 压缩后只有 4.8Kb 可定制 - 外观可...

小编辑 ⋅ 2015/02/24 ⋅ 0

web中用video.js插件播放播放400M的视频卡怎么解决???

web中用video.js插件播放播放400M的视频卡怎么解决???如题,用的是html5的插件播放的,在本地用播放器打开是很流畅的 ,一方面可能因为服务器的网络问题,有其他好的插件或者有没有什么解...

咖啡加糖 ⋅ 2015/12/23 ⋅ 4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sbt网络问题解决方案

http://dblab.xmu.edu.cn/blog/maven-network-problem/

狐狸老侠 ⋅ 3分钟前 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 46分钟前 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 52分钟前 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部