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.οncanplay=function(){
$("#playimg").show();
$("#video").attr("poster","");
}
//視頻播放事件，點擊播放可以記錄學習進度，有獲取當前視頻播放時間屬性
video.οnplay=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.οnpause=function(){
$("#playimg").show();
};
//點擊播放圖片事件
playimg.οnclick=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.οnclick=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();
}
————————————————
版權聲明：本文為CSDN博主「奮斗的怪怪程序猿」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/lg12lp12/article/details/78748564