HTML5 视频在开始播放另一个视频时暂停使用 Javascript
HTML5 Video pause with Javascript when starting to play another video
我只是想知道是否有任何选项可以创建一个 Javascript,当您单击另一个视频的播放时,该脚本会暂停当前正在播放的视频。我在一页上有大约 30-40 个 HTML5 视频标签。
我用来将视频放在页面上的代码:
function pobierz_klipy($typ) {
$result = mysql_query("SELECT * FROM Klipy WHERE typ = $typ ORDER BY id")
or die("Zapytanie niepoprawne");
//ilosc zwroconych wierszy
$num_rows = mysql_num_rows($result);
$i = 0;
while ($i < $num_rows) {
$id = mysql_result($result, $i, "id");
$nazwa = mysql_result($result, $i, "nazwa");
$nazwa_rob = mysql_result($result, $i, "nazwa_rob");
$typ = mysql_result($result, $i, "typ");
$sprawdzian_hq = $sciezka = "../video/data/video/" . $nazwa_rob . "_fb.mp4";
if (file_exists($sprawdzian_hq)) {
$sciezka = "../video/data/video/" . $nazwa_rob . "_fb.mp4";
} else {
$sciezka = "../video/data/video/" . $nazwa_rob . ".mp4";
}
if (file_exists($sprawdzian_hq)) {
$poster = "../video/data/thumbnails/" . $nazwa_rob . "_fb.mp4.jpg";
} else {
$poster = "../video/data/thumbnails/" . $nazwa_rob . ".mp4.jpg";
}
if (file_exists($sprawdzian_hq)) {
$hq = "../video/data/video/" . $nazwa_rob . ".mp4";
} else {
$hq = null;
}
$i = $i + 1;
echo "<div class='"klip'">";
echo '<video id="' . $nazwa_rob . '" width="320" height="180" controls poster= "' . $poster . '" preload ="none">';
echo ' <source id="source_' . $nazwa_rob . '" src="' . $sciezka . '" type="video/mp4">';
echo 'Twoja przeglądarka nie obsługuje HTML5.';
echo '</video>';
echo '<br />';
if ($hq != null) {
echo '<button id="videolink' . $i . '" type="button" class="btn btn-danger active" style=" font-size: 10px; padding: 5px; position: absolute; bottom: 2px; left: 11px;">HQ</button>';
}
echo '<div class="nazwa">'.$nazwa.'</div>';
//skrypt zmiany jakosci JS
if (file_exists($sprawdzian_hq)) {
echo '
<script type = "text/javascript">
var videobutton = document.getElementById("videolink' . $i . '");
videobutton.addEventListener("click", function (event) {
';
echo "
var videocontainer$i = document.getElementById('$nazwa_rob');
var videosource$i = document.getElementById('source_$nazwa_rob');
var newmp4$i = '$hq';
var old_mp4$i = '$sciezka';
var aktywne$i = 'btn btn-success active';
var nieaktywne$i = 'btn btn-danger active';
var przycikstatus$i = document.getElementById('videolink$i');
var obecny_klip$i = videosource$i.getAttribute('src');
var czas_klipu$i = videocontainer$i.currentTime;
console.log(czas_klipu$i);
if (obecny_klip$i != newmp4$i) {
var videosource$i = document.getElementById('source_$nazwa_rob');
videocontainer$i.pause();
videosource$i.setAttribute('src', newmp4$i);
videocontainer$i.load();
videocontainer$i.pause();
videocontainer$i.currentTime = czas_klipu$i;
przycikstatus$i.setAttribute('class', aktywne$i);
videocontainer$i.play();
} else {
var videosource$i = document . getElementById('source_$nazwa_rob');
videocontainer$i.pause();
videosource$i.setAttribute('src',old_mp4$i);
videocontainer$i.load();
videocontainer$i.pause();
videocontainer$i.currentTime = czas_klipu$i;
przycikstatus$i.setAttribute('class', nieaktywne$i);
videocontainer$i.play();
}
}, false);
</script>
";
}
你也可以使用这个JavaScript代码。
//external.js
video = document.getElementsByClassName("video");
for (i = 0; i < video.length; i++) {
video[i].onplay = function () {
var currentIndex = index("video", this);
for (k = 0; k < video.length; k++) {
if (k == currenIndex) { continue }
video[k].pause();
}
}
}
function index(className, id) {
nodes = document.getElementsByClassName(className);
return [].indexOf.call(nodes, id);
}
<html>
<head>
</head>
<body>
<video class="video" src="video1.mp4" controls></video>
<video class="video" src="video2.mp4" controls></video>
<video class="video" src="video3.mp4" controls></video>
<video class="video" src="video4.mp4" controls></video>
<script src="external.js"></script>
</body>
</html>
现在我有这个代码的另一个问题:
<script> video = document.getElementsByClassName("video");
for (i = 0; i < video.length; i++) {
video[i].onplay = function () {
var currentIndex = index("video", this);
for (k = 0; k < video.length; k++) {
if (k == currentIndex) { continue }
video[k].pause();
}
}
}
function index(className, id) {
nodes = document.getElementsByClassName("video");
return [].indexOf.call(nodes, id);
}
</script>
我在一页上有大约 30 个视频标签。当我尝试一个接一个地播放6个视频时,第7个视频的播放无法运行。
抱歉,我没有收到通知。我使用相同的代码播放一个接一个的 30 个视频,没有问题。尝试查看您是否没有将 i 值限制为 7 或类似值。您可能只有 7 个标签具有"视频"类。 如果一切正常,请尝试替换。 document.getElementsByClassName
document.getElementsByTagName
,然后重试。很抱歉没有及时回复。
相关文章:
- tiltSlider播放/暂停视频元素(如果li有当前类)
- 用angular js在屏幕上点击播放和暂停html5视频
- 视频暂停超过1分钟后重定向到新页面
- 删除对HTML5视频标签的控件(播放,暂停等)
- 最小化窗口时HTML视频暂停
- 转义 如果视频暂停,则全屏播放视频
- 视频.js :如果视频暂停,如何淡出控制栏
- HTML视频暂停、播放和删除类
- 检测HTML5视频暂停/播放的移动源
- 当视频暂停时停止setInterval (Youtube播放器)
- HTML5视频暂停和倒带
- 如何结合现有的全屏模式和视频暂停
- 显示海报图像或暂停按钮时,HTML5视频暂停
- 你能停止一个HTML5视频暂停/停止滚动
- JWPlayer -禁用点击视频暂停/恢复
- 我如何开始html5视频暂停,然后在用户开始视频然后自动播放
- WKWebView视频暂停不工作的所有网站
- 未捕获的TypeError: undefined不是函数(视频暂停函数)
- Youtube视频暂停时停止事件
- 我怎么知道什么时候YouTube视频暂停或完成