vedio-js的视频插件用法
<!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的视频插件用法的更多相关文章
- toastr.js插件用法
toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...
- 播放视频插件swfobject.js与Video Html5
播放视频的方法: 方法一. 使用HTML5播放 <video src="./files/Clip_480_5sec_6mbps_h264.mp4" width="1 ...
- jQuery之jquery.lazyload.js插件用法
研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...
- 20款jQuery 的音频和视频插件
分享 20 款jQuery的音频和视频插件 Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器.可定制视频和 ...
- 10个最好的 jQuery 视频插件(转)
在这篇文章中已经收集了 10 个最佳的 jQuery 视频插件,帮助开发人员容易地实现网站播放影片功能.可以显示视频和视频播放列表. 1. Bigvideo.js BigVideo.js 是一个 jQ ...
- 直播视频插件--sewise player
直播视频插件 -- sewise player 2017-1-9 因为公司要开发一个关于购车直播的新项目,需要在页面引入直播视频,项目组之前都没有做过关于直播类型的项目,所以可以说是真的从各种资源中筛 ...
- 纯js客服插件集qq、旺旺、skype、百度hi、msn
原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...
- Videojs视频插件在React中的应用
1.介绍video.js视频插件 1.1 简单介绍 Video.js是一个通用的在网页上嵌入视频播放器的JS库,支持电脑端和移动端.Video.js自动检测浏览器对Html5的支持情况,如果不支持Ht ...
- FitVids,一个轻视频插件,操作简单
最近在找一个视频插件,偶尔看见一个口碑啥的都不错的插件,FitsVids. fitvids.js 是个轻量级,易于使用的 jQuery 插件,用来在网页上播放指定宽度的嵌入视频.Fitvides.js ...
随机推荐
- .NET Core 的缓存篇之MemoryCache
前言 对于缓存我们都已经很熟悉了,缓存分为很多种,浏览器缓存.试图缓存.服务器缓存.数据库缓存等等一些,那今天我们先介绍一下视图缓存和MemoryCache内存缓存的概念和用法: 视图缓存 在老的版本 ...
- 品阿里 Java 开发手册有感
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 一个优秀的工程师和一个普通的工程师的区别,不是满天飞的架构图, ...
- 用SpringCloud进行微服务架构演进
在<架构师必须要知道的阿里的中台战略与微服务> 中已经阐明选择SpringCloud进行微服务架构实现中台战略,因此下面介绍SpringCloud的一些内容,SpringCloud已经出来 ...
- Flink从入门到放弃(入门篇2)-本地环境搭建&构建第一个Flink应用
戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...
- Docker最全教程——数据库容器化(十)
终于按时完成第二篇.本来准备着手讲一些实践,但是数据库部分没有讲到,部分实践会存在一些问题,于是就有了此篇以及后续——数据库容器化.本篇将从SQL Server容器化实践开始,并逐步讲解其他数据库的容 ...
- 【JVM系列】一步步解析java执行内幕
对于任何一门语言,要想达到精通的水平,研究它的执行原理(或者叫底层机制)不失为一种良好的方式.在本篇文章中,将重点研究java源代码的执行原理,即从程 序员编写JAVA源代码,到最终形成产品,在整个过 ...
- Lumen框架-错误&日志
介绍 当你开始一个新的Lumen项目的时候,错误和异常功能,已经在框架中注入了.此外,Lumen还集成了Monolog日志函数,支持和提供多种强大的日志处理功能. 配置 错误详情 大量的错误信息在你的 ...
- Linux 命令行
Linux 命令笔记 一.目录/文件 1.1 目录文件日常操作 . -> 当前目录 .. -> 上一级目录 .file/.dir -> 隐藏文件/文件夹 [ls] 查看指定目录文件 ...
- C# 委托还能这样用
一直找不到一种能够让很多对象都能在几乎同时接收到通知的方法.介绍下目前在用的,希望能够抛砖引玉. 首先随便贴一下观察者模式的两接口,观察者模式自行搜索设计模式. public interface IS ...
- 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)
写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...