js-视频播放插件Video.js简单使用
来源:互联网 发布:自动校对时间软件 编辑:程序博客网 时间:2024/05/23 19:13
插件下载地址: 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简单使用
- Video JS视频播放插件
- 使用video.js播放视频
- video.js 视频播放插件及常见问题
- video.js播放视频
- Video.js视频播放控件
- 【PythonDjango后台实例 第七章】Django使用Video.js视频播放插件
- Video.js简单使用
- 设置video.js多视频连续播放
- video JS实现多视频循环播放
- Video.js 播放rtmp视频流
- video.min.js做视频播放
- 设置video.js多视频连续播放
- H5视频播放库video.js介绍
- 使用Video.js打造网页播放器
- video.js--很赞的H5视频播放库
- video.js 移动端显示播放视频---周总结-20161223
- video.js 中的属性和原生HTML5视频播放
- java 常用工具类 合集
- windows下配置nginx+php环境
- 常用开发命令行参考
- python怎么看一个类的成员
- android 动画Animation属性大全(-)
- js-视频播放插件Video.js简单使用
- Glide 加载圆形图片CircleImageView遇到的问题
- 欢迎使用CSDN-markdown编辑器
- yii框架简单上传(不包含model层)
- 十一周—循环三角形
- 用objgraph包来绘制引用关系时遇到的错误
- 如何生成libsvm格式数据
- FAQ08356][Audio Volume]来电\闹钟\短信提示\铃声预览\拍照音等,在播放过程中插入或者拔出耳机,外放中的铃声音异常
- 【PHP】对于PHP某些代码的总结