插件下载地址: http://www.jq22.com/jquery-info404

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="videojs/video-js.css" rel="stylesheet" type="text/css">
<script src="videojs/video.js"></script>
<script>videojs.options.flash.swf = "video-js.swf";
</script></head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"poster="MusicSystemData/MV/videopic/mvpic1.jpg"data-setup="{}"><source src="MusicSystemData/MV/video/mv10.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><script type="text/javascript">var myPlayer = videojs('example_video_1');videojs("example_video_1").ready(function(){var myPlayer = this;myPlayer.play();});
</script>
</body>
</html>

1.在页面中引用video-js.cs样式文件和video.js

<link href="js/video-js.css" rel="stylesheet" type="text/css">
<script src="js/video.js"></script>

2.设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件

<script>
    videojs.options.flash.swf = "video-js.swf";
</script>

3.设置播放初始图

poster="MusicSystemData/MV/videopic/mvpic1.jpg"

4.设置视频路径,可使用三种视频格式 mp4, webm ,ogg

<source src="MusicSystemData/MV/video/mv10.mp4" type='video/mp4' />

5.设置进入页面自动播放

<script type="text/javascript">
    var myPlayer = videojs('example_video_1');
    videojs("example_video_1").ready(function(){
        var myPlayer = this;
        myPlayer.play();
    });
</script>

6:修改视频路径

要改video元素的src属性,不是改source元素

列:   $("#videoId video").attr("src",videoPath);

7:修改视频封面

修改css样式

.vjs-poster{
display: none;}

$("#videoId video").attr("poster",imagePath);

其他操作看文档

js-视频播放插件Video.js简单使用相关推荐

  1. java flash 播放器_视频播放插件Video.js

    插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.(要支持 ...

  2. php网页视频播放插件下载_视频播放插件Video.js

    插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.(要支持 ...

  3. 视频播放插件 Video.js 使用和个版本下载

    来源:https://blog.csdn.net/zhanghao143lina/article/details/79457035 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,V ...

  4. 视频播放插件(video.js)

    一.视频播放插件 1.插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Fla ...

  5. HTML5视频播放插件 video.js介绍

    本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=kjab&title=HTML5%E8%A7%86%E9%A2%91%E6%92%AD ...

  6. Html5 jquery视频播放插件Video.js

    <!doctype html> <html> <head><meta charset="utf-8"><title>Vi ...

  7. 视频播放插件Video.js

    在网页开发过程中,难免会用到video标签,然鹅video标签的默认样式实在不敢恭维,那如何实现视频播放的样式呢? 首先引入: <link href="css/video-js.min ...

  8. web视频播放插件:Video For Everybody

    相比其它的web视频播放插件(video.js , jwplayer等)来说,Video For Everybody(极力推荐)是一款更好的视频播放插件,无需任何下载,支持html5以及flash播放 ...

  9. php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南

    使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用:xvDate( ...

最新文章

  1. 设计模式笔记之十四 (命令模式)
  2. 从“琐事优先”到“要事优先”,找对方法就对了
  3. 同域内测试蠕虫的一种方法
  4. 【OpenCV3】cv::Mat中的数据按行列写入txt文件中
  5. CentOS部署NetCore - 2. 安装NetCore SDK On CentOS
  6. ASIHTTPRequest 简单使用
  7. java绑定click时间_JAVA面试之vue.js(一)
  8. 【转】DLL中类的显式链接
  9. java 分隔函数split(,-1)的用途
  10. 【最大连接数】Linux的文件最大连接数
  11. MySQL JOIN连接用法
  12. pythonppt_Python简介ppt
  13. 为什么计算机不能自动搜索,电脑搜索功能不能用怎么办?教你一招快速解决
  14. WPS文字绿色版下载 WPS Office 2010 中文绿色版
  15. 区块链开发之windows环境配置
  16. 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  17. 信息[http-nio-80-exec-9] org. apache. coyote. http11. Httpl1Processor.service解析注意:HTTP请求解析错误的进--步发生将记录
  18. 2022T电梯修理考试模拟100题及答案
  19. 藉由GZipStream的壓縮,來減少Web Service的傳輸量
  20. 关于我终于拿捏了C语言结构体那点事 ——超详细的C语言结构体讲解

热门文章

  1. 2020-2021年 元宇宙发展研究报告
  2. 图片折腾的经历——文件批处理、爬虫、图片工具等
  3. typedef——用法总结
  4. 转:typedef的用法
  5. VC界面程序中文字乱码问题
  6. Android SDK proxy代理加速
  7. 中英翻译《The number thirteen数字13》
  8. Posix API总结
  9. stm32学习开发记录:OLED——I2C
  10. ChatGPT通过中国数据库系统工程师(DBA)认证?