<!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. ubuntu上配置nginx实现反向代理

    反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客 ...

  2. Spring Boot 2.0 的快速入门（图文教程）

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! Spring Boot 2.0 的快速入门(图文教程) 大家都 ...

  3. 一套代码小程序&Web&Native运行的探索07——mpvue简单调研

    前言 接上文:[一套代码小程序&Native&Web阶段总结篇]可以这样阅读Vue源码 最近工作比较忙,加之上个月生了小孩,小情人是各种折腾他爸妈,我们可以使用的独立时间片不多,虽然这 ...

  4. swagger文档转换为WebApiClient声明式代码

    1 swagger简介 Swagger是一个规范且完整的框架,提供描述.生产.消费和可视化RESTful Web Service.其核心是使用json来规范描述RESTful接口,另外有提供UI来查看 ...

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

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

  6. C# E店宝格格家接口对接

    一.实现图片 二.实现通用方法 /// <summary> /// 调用通用方法 /// </summary> /// <param name="strURL& ...

  7. webpack 样式表抽离成专门的单独文件并且设置版本号

    先以下的 css 的处理我们都把 mode 设置为 production. webpack4 开始使用: mini-css-extract-plugin插件, 1-3 的版本可以用: extract- ...

  8. 部署 apply plugin: 'realm-android'

    我在build.gradle中添加 apply plugin: 'realm-android' //依赖Realm数据库,插件化依赖  这个后,同步,清理,运行的时候报 应该在build.gradle ...

  9. Android - 文字向上翻滚效果的实现

    本文转载https://xwc2013.iteye.com/blog/1976051 今天看到了一种文字翻滚的效果,感觉非常实用.所以就自己试着做出了这种效果,现在把它分享给大家! 首先在res目录下 ...

  10. Java递归方法遍历二叉树的代码

    将内容过程中经常用的内容做个记录,如下内容内容是关于Java递归方法遍历二叉树的内容. package com.wzs; public class TestBinaryTree { public st ...