Вы можете попробовать это:
Видео Подставьте mp4 файл video.mp4
CSS style.css
#video{ position: relative; }
.myButtons a{ position: absolute; right: 10px;
border: 1px solid blue; display: block; background: #FFF;
z-index: 2147483647;
}
HTML/PHP index.php
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<script src="js.js"></script>
<link rel="stylesheet" href="style.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body>
<div id="video">
<video width="100%" src="video.mp4" controls></video><br><br/>
<div class="myButtons">
<?php
$i=1;
echo "<a href=\"#\" style=\"top:0px\">btn-primary</a>";
$j = 30*$i;
echo "<a href=\"#\" style=\"top:$j"."px\">btn-primary</a>";
$j = 30*++$i;
echo "<a href=\"#\" style=\"top:$j"."px\">btn-primary</a>";
$j = 30*++$i;
echo "<a href=\"#\" style=\"top:$j"."px\">btn-primary</a>";
?>
</div>
</div>
<style>
button{
display: block;
margin-top: 10px;
}
</style>
</body>
</html>
Единственная проблема, я столкнулся в том, что на мобильных телефонах, когда полный экран происходит, кнопки исчезают ... Любой человек с решением для IOS/Android?
Следующий тест для выполнения будет делать это с jwPlayer, будет держать вас в курсе.
отправьте изображение, где хотите поставить кнопку – Rushabh
установить кадр вашего видеоконтроллера – Rushabh