Как получить миниатюру видео HTML5 без использования плаката на сафари или iOS?

У меня есть встроенное видео HTML5 с форматом mp4. Как получить уменьшенное изображение, например, плакат без использования атрибута «плакат». Эта проблема возникает в Safari и iOS. Я добавил видео, как показано ниже.Как получить миниатюру видео HTML5 без использования плаката на сафари или iOS?

<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>

В Chrome, IE, Firefox первый кадр видео совпавшая по миниатюру, но не идет на сафари и прошивкой.

источник

2016-12-21 vedankita kumbhar

Вы можете добавить свой код? –

Есть решение с автовоспроизведением, но оно будет работать только в IOS 10+ – Hokusai

Источник: How to set the thumbnail image on HTML5 video?

Это работает для меня:

<img src="thumbnail.png" alt="thumbnail" /> 
/* code for the video goes here */

Теперь с помощью JQuery воспроизведения видео и скрыть изображение как

$("img").on("click", function() { 
    $(this).hide(); 
    // play the video now.. 
})

источник

2016-12-21 05:45:29

Спасибо, но я не хочу использовать отдельный образ или плакат для видео, потому что видео происходит динамически, и я не хочу переделывать, добавляя отдельное изображение. У вас есть идея, чтобы первый кадр видео установлен как плакат. –

Не могли бы вы использовать js-плагин? –

Нет, какой плагин можно использовать? –

Если вы хотите сделать это без сохранения сервера боковые изображения возможно, хотя и немного неуклюжие ... использует холст для записи первого кадра видео и затем накладывается поверх видеоэлемента. Возможно, можно использовать URL-адрес Canvas в качестве источника для Плаката (например, video.poster = c.toDataURL();), но для этого требуется правильная настройка CORS (не уверен, что видео было на вашем собственном сервере, и если у вас есть контроль над этим, безопасный вариант). Это будет работать лучше, если видео правильно закодировано для потоковой передачи (так атом MOOV находится в передней части видео, в противном случае он будет медленным, чтобы сделать накладку - см this answer более подробно)

HEAD содержит стиль для видео и наложению (вам нужно будет настроить калибровку и положение в соответствии с вашим приложением)

<head> 
    <style> 
    video_box{ 
     float:left; 
    } 
    #video_overlays { 
     position:absolute; 
     float:left; 
     width:640px; 
     min-height:264px; 
     background-color: #000000; 
     z-index:300000; 
    } 
    </style> 
</head>

в BODY вам понадобится div для наложения и видео. Наложение ДИВА имеет onclick обработчика, чтобы скрыть накладку и начать воспроизведение видео

<div id="video_box"> 
    <div id="video_overlays" onclick="this.style.display='none';document.getElementById('video').play()"></div> 

    <video id="video" controls width="640" height="264"> 
     <source src="BigBuck.mp4" type='video/mp4'> 
    </video> 

    </div> 
</div>

Наконец вам потребуется код, который будет загружать видео, стремиться к первому кадру и загружать визуальную в холст, который вы затем вставить в оверлей

<script> 

function generateOverlay() { 
    video.removeEventListener('seeked',generateOverlay);/tidy up the event handler so it doesn't redraw the overlay every time the user manually seeks the video 
    var c = document.createElement("canvas"); 
    var ctx = c.getContext("2d"); 
    c.width = 640; 
    c.height = 264; 
    ctx.drawImage(video, 0, 0, 640, 264); // take the content of the video frame and place in canvas 
    overlay.appendChild(c); // insert canvas into the overlay div 
} 

    // identify the video and the overlay 
    var video = document.getElementById("video"); 
    var overlay = document.getElementById("video_overlays"); 

    // add a handler that when the metadata for the video is loaded it then seeks to the first frame 
    video.addEventListener('loadeddata', function() { 
     this.currentTime = 0; 
    }, false); 

    // add a handler that when correctly seeked, it generated the overlay 
    video.addEventListener('seeked', function() { 
    // now video has seeked and current frames will show 
    // at the time as we expect 
     generateOverlay(); 
    }, false); 

    // load the video, which will trigger the event handlers in turn 
    video.load(); 

</script>

источник

2017-04-05 21:45:29 Offbeatmammal

Как получить миниатюру видео HTML5 без использования плаката на сафари или iOS?

ответ

Смежные вопросы