如何在Safari或iOS上不使用海报获取HTML5视频缩略图？

wooyq4lh 于 2023-03-31 发布在 iOS

关注(0)|答案(6)|浏览(232)

我已经嵌入了HTML5视频与MP4格式.如何获得缩略图像海报不使用“海报”属性.这个问题来在Safari和iOS.我已经添加了视频像下面提到的代码.

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

在Chrome、IE、Firefox上，视频的第一帧是缩略图，但在Safari和iOS上不是。

ios

来源：https://stackoverflow.com/questions/41255841/how-to-get-html5-video-thumbnail-without-using-poster-on-safari-or-ios

6条答案

按热度按时间

wfypjpf41#

简单地添加preload="metadata"在video标签和设置#t=0.1在url源，它会得到帧的0.1s你的视频作为缩略图
但是，这种解决方案的缺点是，当您单击播放视频时，它总是以0.1秒开始

<video preload="metadata" controls>
    <source src="video.mp4#t=0.1" type="video/mp4">
</video>

赞(0）回复(0）举报 2023-03-31

p4rjhz4m2#

如果你不想存储服务器端的图像，也可以使用画布来记录视频的第一帧，然后覆盖在视频元素上，虽然有点笨拙。（例如video.poster = c.toDataURL();），但需要正确的CORS设置（不确定视频是不是在你自己的服务器上，如果你对此有控制权，所以采取了最安全的选择）。如果视频被正确编码用于流传输，这将工作得最好（所以MOOV原子在视频的前面，否则绘制覆盖层会很慢-请参阅此答案以了解更多细节）
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来进行覆盖和视频。

<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>

赞(0）回复(0）举报 2023-03-31

e5nqia273#

这是一个有点晚，但我们有相同的情况.我不能使用属性'静音'，因为我的视频是播客.这是我想出的，我希望与未来的游客分享它.我所做的是加载在body标签的视频，画了一个画布，检索为base64和应用到视频作为背景图像.
由于我的视频应该是固定的150px的高度，我计算的纵横比，使任何实际视频的高度和宽度，它将被调整为150px的高度和动态宽度。

$('body').append('<video class="checkmeload" style="position:absolute;top:-10000px" controls preload="auto" playsinline src="//src-here"><source src="//src-here" type="//videotype-here"></video>');

$('body').find('.checkmeload').on('loadeddata', function(){
    var video = $('.checkmeload');

    var canvas = document.createElement('canvas');
    aspectratio = (video[0].videoWidth / video[0].videoHeight);
    newwidth = (150 * aspectratio);
    canvas.width = newwidth;
    canvas.height = 150;

    var context = canvas.getContext('2d');
    context.drawImage(video[0], 0, 0, canvas.width, canvas.height);
    var dataURI = canvas.toDataURL('image/jpeg');

    $('body').find('.checkmeload').remove(); 

    $('#myvideo').css('background-image','url("'+dataURI +'")');
});

赞(0）回复(0）举报 2023-03-31

col17t5w4#

来源：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..
})

赞(0）回复(0）举报 2023-03-31

9vw9lbht5#

在视频URL的末尾添加#t=0.001。
https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/

赞(0）回复(0）举报 2023-03-31

noj0wjuj6#

我在iOS上遇到了同样的问题。
缩略图可以通过下面的方法在没有poster属性的情况下显示。它也支持blob url。

// videoE: HTMLVideoElement
videoE.src = "...";
videoE.load();　// please load()

演示https://codepen.io/arayutw/pen/NWLVpXK

赞(0）回复(0）举报 2023-03-31

我来回答

如何在Safari或iOS上不使用海报获取HTML5视频缩略图？

6条答案

相关问题

热门标签

最新问答