<!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. Java基础知识回顾之五 ----- 多线程

    前言 在上一篇文章中,回顾了Java的集合.而在本篇文章中主要介绍多线程的相关知识.主要介绍的知识点为线程的介绍.多线程的使用.以及在多线程中使用的一些方法. 线程和进程 线程 表示进程中负责程序执行 ...

  2. SpringCloud学习中遇到的一些bug

    There was a problem with the instance info replicator 错误原因: 该服务尝试将自己作为客服端注册 解决办法: 在application.yml配置 ...

  3. 对HTML5标签的认识(三)

    这篇随笔继续来认识HTML标签.这次随笔主要是对<table>标签的认识和最近我学习到的一些标签来和大家分享. 一.<table>标签 <table>标签的作用主要 ...

  4. Spring MVC深入学习

    一.MVC思想 MVC思想简介:        MVC并不是java所特有的设计思想,也不是Web应用所特有的思想,它是所有面向对象程序设计语言都应该遵守的规范:MVC思想将一个应用部分分成三个基本部 ...

  5. 数据库学习（MySQL）：JDBC的简单增删改查实现

    本文为原创,转载请注明出处: https://www.cnblogs.com/Tom-shushu/p/9171896.html 这里我们先在数据库建立一个userinfo表: CREATE TABL ...

  6. 007. 服务间通信 RPC & REST over HTTP(s) & 消息队列

    服务间通信 服务间通信的几种方式: RPC.REST over HTTP(s).消息队列.  https://www.jianshu.com/p/2a01d4383d0b RPC https://bl ...

  7. glibc溢出提权CVE-2018-1000001总结

    遇到了好几个centos6.5,一直尝试想提权.暂未成功,靶机内核:2.6.32-696.18.7.el6.x86_64. glibc版本:ldd (GNU libc) 2.12 目前编译过程中都发现 ...

  8. 虚拟机安装CentOS7（一）

    软件环境 虚拟机:VMware Workstation Linux:CentOS-7-x86_64-DVD-1708.iso镜像文件 虚拟机所在电脑系统:win7 安装步骤 安装VMware 下载Li ...

  9. arcgis api 3.x for js 入门开发系列十五台风轨迹

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  10. 从零学习Fluter(六):Flutter仿boss直聘v1.0重构

    今天继续学习flutter,觉得这个优秀的东西,许多方面还需要完善,作为一个后来者,要多向别人学习.俗话说,“学无先后,达者为师”.今天呢,我又重新把flutter_boss这个项目代码 从头到脚看了 ...