<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Vedio_Js使用</title>

        <link rel="stylesheet" type="text/css" href="css/reset.css" />

        <link rel="stylesheet" href="css/video-js.css">

        <script src="js/video.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript" src="http://img.huiyiguanjia.com/CDNFile/jquery/jquery-1.10.2.min.js"></script>

    </head>

    <body>

        <style>

            /*调整播放按钮*/

            .type3_3s_02 .video-js .vjs-big-play-button {

                width: 1.5em;

                height: 1.5em;

                border-radius: 50%;

                font-size: 2.5em;

                margin-left: -0.7em;

                margin-top: -1em;

                line-height: 1.4em;

            }

            .type3_4s_02 .video-js .vjs-big-play-button {

                width: 2em;

                height: 2em;

                border-radius: 50%;

                font-size: 3em;

                line-height: 1.8em;

            }

        </style>

        <div class="fl type3_4s_02">

            <div class="video-box1">

                <video class="video-js vjs-default-skin vjs-big-play-centered" loop controls preload="none" width="412" height="230" webkit-playsinline="true" playsinline="true" poster="img/vedio4.jpg" data-setup="{}">

                    <source src="vedio/4.mp4" type='video/mp4' />

                    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>

                    <!-- Tracks need an ending tag thanks to IE9 -->

                    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>

                    <!-- Tracks need an ending tag thanks to IE9 -->

                </video>

            </div>

        </div>

    </body>

</html>

文件下载路径：https://i.cnblogs.com/Files.aspx  ——vedio_js.zip

单独下载css/JS：http://xiaxiaoxia.top/Data/css/video-js.css，http://xiaxiaoxia.top/Data/js/video.min.js

vedio-js的视频插件用法的更多相关文章

  1. toastr.js插件用法

    toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...

  2. 播放视频插件swfobject.js与Video Html5

    播放视频的方法: 方法一. 使用HTML5播放 <video src="./files/Clip_480_5sec_6mbps_h264.mp4" width="1 ...

  3. jQuery之jquery.lazyload.js插件用法

    研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...

  4. 20款jQuery 的音频和视频插件

    分享 20 款jQuery的音频和视频插件 Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器.可定制视频和 ...

  5. 10个最好的 jQuery 视频插件(转)

    在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个 jQ ...

  6. 直播视频插件--sewise player

    直播视频插件 -- sewise player 2017-1-9 因为公司要开发一个关于购车直播的新项目,需要在页面引入直播视频,项目组之前都没有做过关于直播类型的项目,所以可以说是真的从各种资源中筛 ...

  7. 纯js客服插件集qq、旺旺、skype、百度hi、msn

    原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...

  8. Videojs视频插件在React中的应用

    1.介绍video.js视频插件 1.1 简单介绍 Video.js是一个通用的在网页上嵌入视频播放器的JS库,支持电脑端和移动端.Video.js自动检测浏览器对Html5的支持情况,如果不支持Ht ...

  9. FitVids，一个轻视频插件，操作简单

    最近在找一个视频插件,偶尔看见一个口碑啥的都不错的插件,FitsVids. fitvids.js 是个轻量级,易于使用的 jQuery 插件,用来在网页上播放指定宽度的嵌入视频.Fitvides.js ...

随机推荐

  1. SQL优化 MySQL版 -分析explain SQL执行计划与Extra

    Extra 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 注:此文章必须有一定的Mysql基础,或观看执行计划入门篇传送门: https:.html 终于总结到哦SQK执行计划的最 ...

  2. cocos creator主程入门教程（十一）—— 有限状态机和行为树

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 本篇介绍有限状态机和行为树.有限状态机用于有限的状态下的AI,由于同时只能处于一个状态,多个状态需要多个 ...

  3. 利用SHA-1算法和RSA秘钥进行签名验签(带注释)

    背景介绍 1.SHA 安全散列算法SHA (Secure Hash Algorithm)是美国国家标准和技术局发布的国家标准FIPS PUB 180-1,一般称为SHA-1.其对长度不超过264二进制 ...

  4. 推荐三个 VSCode 摸鱼插件

    周三是一周中最难以度过的一天,离上个周末过去了两天,离下个周末也还有两天.为了让各位更好地搬(mo)砖(yu),今天给大家推荐三款效(mo)率(yu)工(shen)具(qi)! 一.听歌插件 1 功能 ...

  5. DSAPI QQ用户相关

    获取指定QQ号头像 Label1.Image=DSAPI.QQ用户相关.下载QQ头像("20353841") 获取指定QQ群头像 Label1.Image = DSAPI.QQ用户 ...

  6. C# 添加Word页眉、页脚和页码

    在Word文档中,我们可以通过添加页眉.页脚的方式来丰富文档内容.添加页眉.页脚时,可以添加时间.日期.文档标题,文档引用信息.页码.内容解释.图片/LOGO等多种图文信息.同时也可根据需要调整文字或 ...

  7. php去除数组中重复值,并返回结果!

    array_unique(array) 只能处理value只有单个的数组. 去除有多个value数组,可以使用如下函数实现: function more_array_unique($arr=array ...

  8. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  9. webpack使用exclude

    在进行项目打包的时候,当使用babel-loader进行js兼容时,不需要将node_modules模块下的所有js文件进行打包.

  10. HandlerThread原理分析

    HandlerThread是一个内部拥有Handler和Looper的特殊Thread,可以方便地在子线程中处理消息. 简单使用 HandlerThread的使用比较简单. mHandlerThrea ...