文档章节

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

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

 

© 著作权归作者所有

共有 人打赏支持
高处胜寒
粉丝 6
博文 182
码字总数 109354
作品 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
关于HLS直播流H5页面播放解决

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

小浊微清
2017/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

71.告警系统主脚本 配置文件 监控项目

20.20 告警系统主脚本(main.sh) 20.21 告警系统配置文件 20.22 告警系统监控项目 20.20 告警系统主脚本(main.sh): ~1.约定:把以后所有的shell脚本放在/usr/local/sbin下,也方便我们查...

王鑫linux
6分钟前
0
0
装饰者模式

装饰者模式 Q:何为装饰模式? ()地给一个对象添加一些额外的(),并且()时,并不影响原对象。扩展功能来说,装饰器模式相比生成子类更为灵活。 Q:使用场景? 1.想要在不影响其他对象的情况下...

阿元
27分钟前
0
0
GO 切片(slice)相关语法

package mainimport("fmt")func main() {var intArr [5]int = [...]int{1,2,3,4,5} //定义一个数组slice := intArr[2:4] //第二个(包含)下标到第四个下标(不包含)fmt.Println...

汤汤圆圆
28分钟前
0
0
活动招募 HUAWEI HiAI公开课·北京站-如何在4小时把你的APP变身AI应用

人工智能和机器学习是全球关注的新趋势,也是当前最火爆、最流行的话题。当你拿手机用语音助手帮你点外卖,智能推荐帮你把周边美食一网打尽;当你拿起P20拍照时,它将自动识别场景进行最美优...

华为终端开放实验室
43分钟前
1
0
匹配两位小数,js正则

var regex = /^\d*(\.[1-9]|\.\d[1-9])*$/ console.log(1.2,regex.test(1.2)); console.log(0.3,regex.test(0.3)); console.log(1.03,regex.test(1.03)); ......

微信小程序-暗潮
47分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部