H5 video 标签 播放事件 视频加载完成事件 获取视频播放进度时间
来源:互联网 发布:java运行环境变量配置 编辑:程序博客网 时间:2024/04/28 11:13
html 代码
<video controls="controls" id="video" poster="放图片,为了防止视频没加载完成显示空白" autoplay="autoplay自动播放">
<source src="视频路径" type="video/mp4" id="source"/>
Your browser does not support the video tag.
</video>
JS代码
var playimg=document.getElementById("playimg");//一个播放按钮的图片
var video=document.getElementById("video");//video标签对象
video.currentTime;//获取视频当前播放时间
//如果视频加载完成 播放按钮图片显示,视频图片设置为空,显示视频内容
video.oncanplay=function(){
$("#playimg").show();
$("#video").attr("poster","");
}
//视频播放事件,点击播放可以记录学习进度,有获取当前视频播放时间属性
video.onplay=function(){
if($("#is_record").val()==null || $("#is_record").val()==''){
$.ajax({
type : "post",
url : ctx+"/traincourserecord/save.shtml",
data:{
con_id : $('.now_play').data("id"),
course_id : $("#course_id").val()
},
success : function(data) {
if(data.flag){
}else{
parent.layer.msg("记录学习出现错误");
}
},
error: function(data) {
parent.layer.msg("记录学习出现错误");
}
});
}
$("#playimg").hide();
};
//视频暂停事件
video.onpause=function(){
$("#playimg").show();
};
//点击播放图片事件
playimg.onclick=function(){
$("#is_record").val(1);
if(video.paused){
$("#playimg").hide();
video.play();
$.ajax({
type : "post",
url : ctx+"/traincourserecord/save.shtml",
data:{
con_id : $('.now_play').data("id"),
course_id : $("#course_id").val()
},
success : function(data) {
if(data.flag){
}else{
parent.layer.msg("记录学习出现错误");
}
},
error: function(data) {
parent.layer.msg("记录学习出现错误");
}
});
}
};
//点击视频周围暂停播放图片出现
video.onclick=function(){
if(video.play()){
$("#playimg").show();
video.pause();
}
};
//切换视频事件,在需要播放的视频上面加上此事件
function play(path,sta){
var video=document.getElementById("video");
$("#source").attr("src",path);
$(".after_login_online .radio_list ul li").eq(sta).addClass("now_play").siblings().removeClass('now_play');
video.load();
$("#playimg").show();
video.play();
}
function play(path,sta){
var video=document.getElementById("video");
$("#source").attr("src",path);
$(".after_login_online .radio_list ul li").eq(sta).addClass("now_play").siblings().removeClass('now_play');
video.load();
$("#playimg").show();
video.play();
}
阅读全文
0 0
- H5 video 标签 播放事件 视频加载完成事件 获取视频播放进度时间
- 视频播放- video标签
- video播放视频以及相关事件
- H5 video 标签播放视频遇到的问题
- H5的video标签的属性和播放事件
- H5视频播放库video.js介绍
- html5视频标签播放视频时的事件问题
- H5视频播放,左右滑手势控制播放进度。
- video/audio onended(播放完成)事件
- [HTML5] Video 标签播放及控制视频
- 使用HTML5的video标签播放视频
- Web视频播放 之 【HTML5 Video标签】
- video 播放视频
- html5-video视频播放
- video实现视频播放
- video.js播放视频
- 网页 video视频播放
- Android Video视频播放
- 关于Lc.exe 已退出,代码 -1 的解决方案
- LVS原理与使用(1)
- linux的rsync工具的常用选项及ssh同步介绍
- SignalR入门
- [Leetcode] 513. Find Bottom Left Tree Value 解题报告
- H5 video 标签 播放事件 视频加载完成事件 获取视频播放进度时间
- ActiveMQ实战(六)--Spring整合ActiveMQ实现队列和主题发布订阅通信
- Call ANSYS from python
- 数字货币的诞生是否影响了互联网金融未来发展方向
- react-native Android打包apk
- SpringMVC上传文件的三种方法
- linux CentOS7 安装 RabbitMQ 3.6.3, Erlang 19.0
- Android 生产jar包
- Azkaban编译及WebServer模式部署