I have an HTML5 video with a poster attribute. I would like to somehow set it up so that you can click on anywhere on the video element (the area of the poster image) and it will fire the play event and start the video? I feel like this is fairly standard practice, but I can not find a way to do this without flash. Any help would be much ...
Share, comment, bookmark or report
But i now want to add a poster to the player, so i can use a thumbnail for the video, before it plays. Plyr supports this, but i can not get it to work. I am currently using Plyr in its most simple form:
Share, comment, bookmark or report
Share, comment, bookmark or report
1. Poster的目的. 一张好的海报会以一种视觉的、图形化的方式传达你的信息,这样读者就能快速辨别你的信息。一份有效的科学海报是对数据的可视化表达,这些数据被组织和整合成易于理解的格式。这是最重要的,确保你的海报是有逻辑的,一致的,设计良好的。
Share, comment, bookmark or report
I have found the poster attribute to be too inconsistent. For me, preload="none" only fixed the IE 9 problem. You are better off editing your video so that the poster image is the first frame of your video. I am a big fan of this Video for Everybody site which outlines exactly how one should implement the html5 <video> tag with fallbacks.
Share, comment, bookmark or report
Notice that you cannot rely or control the poster size/cropping dimensions of the posters. This will be a pain in the ass if you need same size for thumbnail grid. For instance, this title will give out horizontal image despite the main image of that short movie is cropped differently on the page.
Share, comment, bookmark or report
Just FYI, the"poster" is different from the video thumbnail that gets embeded inside the video file. Yes, this is semantics here, for most people they think about a"thumbnail" in the html which is really the HTML5 poster attribute and does not exist inside the video file.
Share, comment, bookmark or report
See example below of a video with a poster that is much taller than the native video source. By setting the video width to 100% and height: auto, the computed height will respect the specified aspect ratio. When combined with object-fit: cover, the poster image is constrained to the video element's computed height/width.
Share, comment, bookmark or report
4. I found a great way to dynamically add poster to a video! To show the desired frame from video (in my case it's the frame at 1.75 seconds) - add preload="metadata" to the video element and #t=1.75 to the end of source URL. Add eventListener to the video element that will listen for play event only once.
Share, comment, bookmark or report
I want to use either native JavaScript or jQuery to change the poster attribute on the HTML video tag. Any help would be greatly appreciated.
Share, comment, bookmark or report
Comments