<!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. matlab常用目录操作

    总结matlab下常用到的目录操作 添加当前文件夹及其子文件夹至搜索路径 % add path rootDir = fileparts(mfilename('fullpath')); addpath( ...

  2. SLAM+语音机器人DIY系列：（三）感知与大脑——5.机器人大脑嵌入式主板性能对比

    摘要 在我的想象中机器人首先应该能自由的走来走去,然后应该能流利的与主人对话.朝着这个理想,我准备设计一个能自由行走,并且可以与人语音对话的机器人.实现的关键是让机器人能通过传感器感知周围环境,并通过 ...

  3. 详解mybatis配置文件

    在前面两篇文章中,大致与大家分享了基于Java的ORM框架,Mybatis基本架构和Mybatis实现CRUD的基本原理与流程,在本篇文章中,继续与大家分享Mybatis配置文件. 通过研究Mybat ...

  4. KVM虚拟化使用详解--技术流ken

    KVM介绍 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中. KVM的虚拟化需要硬件支持 ...

  5. svn 卡死住，关闭后，用CleanUp报错解决

    一.问题描述: 经常用SVN的人都知道,有时候更新文件更新着更新一般,突然卡顿住,死在那边动都不动出现提示:svn cleanup failed–previous operation has not ...

  6. acrobat pdf 按页拆分

    百度 https://jingyan.baidu.com/article/37bce2be7098a21002f3a2f2.html 百度acrobat版本比我的高,操作不同了: 我的方案: 组织页面 ...

  7. js转换时间戳-转换成 yyyy-MM-dd HH:mm:ss

    比如:转换成 yyyy-MM-dd HH:mm:ss //时间戳转换方法 date:时间戳数字 function formatDate(date) { var date = new Date(date ...

  8. python的学习笔记01_6练习

    # 一.[用户登陆程序]# 基础需求:# 让用户输入用户名密码# 认证成功后显示欢迎信息# 输错三次后退出程序 count = 0 name = "cheng" password ...

  9. 未找到导入的项目“C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\DotNet\Microsoft.DotNet.Props”

    未找到导入的项目“C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\DotNet\Microsoft.DotNet.Props” ...

  10. 搭建 structs2 环境

    前言 环境: window 10 ,JDK 1.8 ,Tomcat 7 ,MyEclipse 2014 pro 搭建 SSH 环境的步骤 创建 JavaWeb 项目 导入 structs2 的jar包 ...