html code
<video controls = "controls" id = "video" poster = " put pictures in order to prevent the video not loaded blank" autoplay = "autoplay autoplay">
<Source src = "Video Path" type = "video / mp4" = the above mentioned id "Source" />
Your Browser does not Support at The Video Tag.
</ Video>
JS code
var playimg = document.getElementById ( "playimg" ); // a play button image
var video = document.getElementById ( "video" ); // video label object
video.currentTime; // get the current video playback time
// If the video has finished loading the play button to display pictures, video images set to null, display video content
video.οncanplay = function () {
$ ( "# playimg") Show ();.
. $ ( "# Video") attr ( "Poster", "");
}
// play event video, click the play can record the learning progress, there is time to get the current video playback attribute
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.In Flag) {
} the else {
parent.layer.msg ( "recording calibration error");
}
},
Error: function (the Data) {
parent.layer.msg ( "learning record error");
}
});
}
. $ ( "# Playimg") hide ();
};
// video pause event
video.οnpause function = () {
$ ( "# playimg") Show ();.
};
// click on the picture to play the event
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) {
} the else {
parent.layer.msg ( "recording calibration error");
}
},
error : function (the Data) {
parent.layer.msg ( "learning record error");
}
});
}
};
// click around the video to pause playback picture appears
video.οnclick = function () {
IF (Video.play ( )) {
$ ( "# playimg") Show ();.
Video.pause ();
}
};
// switch the video event to be played in the video above to add this event
function Play (path, the STA) {
var Video = document.getElementById ( "Video");
. $ ( "# Source") attr ( "src", path);
$ ( "ul li after_login_online .radio_list.") EQ (the STA) .addClass ( "now_play") SIBLINGS () removeClass ( 'now_play');...
video.load ();
$ ( "# playimg" ) .Show ();
Video.play ();
}
----------------
Disclaimer: This article is CSDN blogger "program ape strange struggle" in the original article, follow CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
Original link: https: //blog.csdn.net/lg12lp12/article/details/78748564