HTML5 video - кастомная кнопка

А с getElementByclass или getElementByName? 

Любой вариант подойдет, кроме getElementById

Я выше написал, что видео может быть несколько, но не указал, что каждое в отдельном блоке. Примерно вот так:

<div class="my-video">
   <video>
       <source src="/catalog/123.mp4" type="video/mp4">
   </video>
   <img class="play-button" src="/catalog/play-button.png" alt="">
</div>

Через события.

Все видео находите по селектору ".my-video", дальше циклом назначаете действия для событий дочерних элементов.

Полезные ссылки:

https://www.w3.org/2010/05/video/mediaevents.html

https://andew.ru/pages/page/html5-audio-video-js-mediaevents.php - здесь даже пример есть.

Примерно так:

<script>
video = 0;
$('.play-button').on('click', function() {
var btn = $(this).data();
$('.play-button').each(function(i) {
var subm = $(this).data();
if(subm==btn){
  $('video').each(function(x, elem) {
  if(i==x){
  if(video==0){
  $(elem).trigger('play');
  video=1;
  }else{
  $(elem).trigger('pause');
  video=0;
  }
 }
  });
  return true;
}
});
});
</script>

при клике на батон видео запускается (если остановлено) или останавливается (если запущено), если вам нужно только запускать, то можно убрать глобальную переменную video и условия - просто прописать   $(elem).trigger('play');  PS: наверное есть лучшие решения реализации - я не гуру в jquery, но главное скрипт работает :)

Подобный варик используя перебор children - по сути одно и то же:

<script>

video = 0;
$('.play-button').on('click', function() {
var btn = $(this).data();
$('.my-video').children('img').each(function (i) {
var subm = $(this).data();
if(subm==btn){
$('.my-video').children('video').each(function (x) {
if(i==x){
if(video==0){
    $(this).trigger('play');
    video=1;
    }else{
    $(this).trigger('pause');
    video=0;
    }
    }
    });
    }
});
});

</script>

Чутман переделал - теперь при нажатии батона запускается видео, и если было запущено другое видео на странице, оно останавливается, также при повторном нажатии на батон видосик остановится, если он запущен, вот кодик:

<script>

$('.play-button').on('click', function() {
var btn = $(this).data();
$('.my-video').children('img').each(function (i) {
var subm = $(this).data();
if(subm==btn){
$('.my-video').children('video').each(function (x) {
var video = $(this).get(0);
if(i==x){
if ( video.paused ) {
    video.play();
    }else{
    video.pause();
    }
    }else{
    video.pause();
    }
    });
    }
});
});

</script>

код с появлением/исчезанием кнопки решение такое на jquery:

function vid(i){
$('video').each(function (x) {
var video = $(this).get(0);
if(i==x){
    video.play();
}else{
video.pause();
$('.play-button').each(function (b) {
if(b!==i){
$(this).css({"display":"inline"});
}
});
}
});
}
function showbtn(i){
$('.play-button').each(function (b) {
if(b==i){
$(this).css({"display":"inline"});
}
});
$('video').each(function (x) {
var video = $(this).get(0);
if(i==x){
video.pause();
}
});
}
$('.play-button').each(function (i) {
$(this).on('click', function(){
$(this).css({"display":"none"});
vid(i);
});
});
$('video').each(function (i) {
$(this).on('click', function(){
showbtn(i);
});
});

По клику на батон видео проигрывается, а батон исчезает, при этом если было запущено другое видео на странице, то оно останавливается и батон остановленного видео появляется. При клике на проигрывающем видео оно останавливается, батон появляется

Я бы оставил на странице только  

<img class="play-button" src="/catalog/play-button.png" alt="">

Можно даже обернуть в ссылку на видео. А уже по клику подменял на 

<video >
       <source src="/catalog/123.mp4" type="video/mp4">
</video>

с автоплеем. Делается через тот же .html() в jquery.  А вот с паузой...

//JS функции для работы с примером:
//запуск воспроизведения видео примера
function playClip(media) {
  media.play();
}

//стоп воспроизведения видео примера
function stopClip(media) {
  media.pause();
}

Отсюда: https://andew.ru/pages/page/html5-audio-video-js-play.php

Сделал пример как это вижу с 3 блоками для теста: https://dikij.com/test7.php

<script>
$("video").click(function () {
if (this.paused) {
  this.play()
} else {
  this.pause()
}
});
</script>