When I use the Bootstrap modal to display the video data, it works successfully, but the problem starts when I play the video, and start closing the video, it turns out that the video is still playing behind the scenes. Here are the things I did to deal with this problem.
Purpose
Create a script js that handles refresh url when the video is closed and autoplay when the modal button is pressed.
Prerequire
1. Modal Identification
In my case
each modal has their own id
so I collect them into one in array like the following.
var modals = ["#thestory", //name modal target
"#theprophecy",
"#theannouncement",
"#theincarnation",
"#promo_kka",
"#promo_kingstone",
"#kingstone_intro",
"#kingstone_digital",
];
2. Script Handle Loop
This looping script takes advantage of the identical parameter id
in the array that step one does. And with the help of jquery we do set open and close modal respectively.
modals.forEach(myFunction);
function myFunction(item) {
//berjalan ketika modal close agar video di reload dan tidak play ketika close
$(item).on('hidden.bs.modal', function (e) {
$(item + " video").attr("src", $(item + " video").attr("src"));
});
//berjalan ketika modal open, agar play automatis
$(item).on("shown.bs.modal", function (e) {
$(item + " video")[0].play();
})
}
DONE
ideas for the future, retrieve id
with selector using class
definition.
Top comments (0)