Проигрыватель видеоигр, который воспроизводится на другой странице

Question

У меня есть графические анимации на моем сайте (более 200 и подсчет). Форматы файлов: .ogv, .avi, .mov.

У меня есть сводная страница со всеми анимациями видео в миниатюре, и пользователь видит видеоплеер HTML5 с каждой анимацией. Можно ли оставить видеоплеер HTML5 с моими анимациями на сводной странице, но когда пользователь нажимает на видео, открывается другая страница, где можно воспроизводить видео?

Я знаю, что могу использовать миниатюру видеоизображения .png и иметь изображение «видеоигра» в качестве водяного знака над ним и ссылаться на другую страницу при нажатии, но это не то решение, которое я хочу для более чем 200 видео. Я пробовал эффект зависания, но когда вы нажимаете на него, то все же видео воспроизводится сразу на странице сводки.

В принципе, я хочу, чтобы видеоплеер показывал, но отключил элементы управления. И позвольте щелкнуть видео, которое приведет пользователя к другой странице, где можно воспроизводить полноэкранное видео. Это возможно?

Это мой код:

.videofile:hover { 
 
    opacity:.3 
 
}

<div class="videofile"> 
 
    <video controls=""> 
 
    <source src="https://commons.wikimedia.org/wiki/File%3AAnimaci%C3%B3n_de_escanciar.ogv" type="video/ogv" /> 
 
    </video> 
 
</div>

Answer 1

Вот вариант с использованием ::after псевдо-элемент:

.videofile { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 
.videofile:hover::after { 
 
    content:""; 
 
    background:rgba(255,255,255,0.5); 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    left:0; 
 
}

<a href="http://www.stackoverflow.com"> 
 
    <div class="videofile"> 
 
    <video controls="" preload="metadata"> 
 
     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/> 
 
     <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/> 
 
    </video> 
 
    </div> 
 
</a>

Как это решение работает:

• Ссылка обертывает vi deo контейнер;
• В div добавлен псевдоэлемент, содержащий видео. Он будет охватывать всю территорию его родителя;
• Псевдоэлемент будет отображаться только при наведении мыши на видео (таким образом кнопки будут закрыты и не будут доступны для клика).

Одна хорошая вещь об этом решении заключается в том, что вы можете настроить его с помощью CSS: добавлять изображения, текст или все, что вам нужно, простым способом.Например, код выше было сделано, чтобы соответствовать демо вы, перенесенных матча, как это возможно, но вы можете изменить его, чтобы отобразить кнопку воспроизведения на видео без контроля:

.videofile { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 
.videofile:hover::after { 
 
    content:"\25BA"; 
 
    font-size:64px; 
 
    color:rgba(0,0,0,0.7); 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    left:0; 
 
    background:rgba(255,255,255,0.5); 
 
    text-align:center; 
 
    line-height:176px; 
 
}

<a href="http://www.google.com"> 
 
    <div class="videofile"> 
 
    <video preload="metadata"> 
 
     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/> 
 
     <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/> 
 
    </video> 
 
    </div> 
 
</a>

Answer 2

Попробуйте

1. создавать изображения/эскизы видео:

2. Создает ссылку с меткой , и имеют вышеуказанные изображения как содержание, подобно ниже:

   <a href="..." target="_blank"> <img ... /> </a> 
   

Мишень _blank приведет вас к HREF URL тега.

Образец пример на JSFiddle here

удачи.

(Отметить это как ответ, если это служит ваши потребности.)