I don't have any thumbnails displayed when the video is not launched on mobile, but on the web I do have the preview, if anyone has an idea, thanks.
<Video><video playsInline controls width="300" height="300">
<source
src="4.mp4"
type="video/mp4"
/>
Sorry, your browser doesn't support embedded videos.
</video></Video>
I had this issue also on my React.js application only on a mobile view.
I've tried to add the preload="metadata" attribute without success, and also tried another hack to add this string at the end of the URL - "#t=0.001" that should stop the video one second before, and still the same issue.
I found a nice solution that also allows you to control the thumbnail by adding a poster attribute with a URL of the image that you want to display. it looks like that in the code:
<body>
<video
width="400"
height="350"
controls
poster="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png">
<source
src="https://media.geeksforgeeks.org/wp-
content/uploads/20200409094356/Placement100-_-GeeksforGeeks2.mp4"
type="video/mp4">
</video>
</body>
Related
Ok Let me explain my situation, I am trying to build a Cover section for a profile page, where users can set either an image or a video as their cover.
I am unsure how to render both a video file and an image file based on the provided file URL.
I tried to find a similar project, but I found none.
Can you guys help me with how to accomplish this?
Yes you can do if just use Vide tag and put the same url in poster and src
<video width="100px" poster="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png" src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png" muted autoplay loop ></video>
<video
width="100px" poster="https://clashdome.io/images/newHome/video_home.mp4" muted autoplay>
<source src="https://clashdome.io/images/newHome/video_home.mp4" type="video/mp4">
</video>
so if its a video then it will run as a video if its a image then it will render as image, also idk if its correct according to accessibility but its pretty clean and does the job perfectly
I have an issue with Frontity React, where it loads up featured images fine and some other images, but quite a lot of image which are added to the page either from a plugin (such as foogallery)
<figure class="fg-item-inner"><span class="fg-image-wrap"><span height="300" width="200" class="css-pxqjd2-Container e16qyzlb0"><img alt="" class="frontity-lazy-image skip-lazy fg-image" loading="lazy" width="200" height="300" data-src-fg="2109218829.jpg" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22300%22%20viewBox%3D%220%200%20200%20300%22%3E%3C%2Fsvg%3E"></span></span><span class="fg-image-overlay"></span><figcaption class="fg-caption"><div class="fg-caption-inner"></div></figcaption></figure>
Any idea what might be causing this?
FooGallery adds a placeholder SVG for its lazy loading, which is replaced when the gallery JavaScript runs. You can disable lazy loading for the gallery (or for all galleries via settings page) which will stop this behavior.
i am using Angular 10
i have html 5 video player & on full screen mode, i want to prevent right click,
by prevent right click i want to prevent user from download video, using right click, any user can download any video
here is my code
<video width="100%" controls controlsList="nodownload" oncontextmenu="return false" preload="auto" playsinline>
<source src="url" type="video/mp4">
{{'Your browser does not support HTML5 video.'| translate:utilService.lang}}
</video>
oncontectmenu is not working in full screen mode in Safari browser
so, how can i prevent right click in Safari Browser with HTML 5 Video
Try hiding it with CSS instead of cancelling the event:
video::-webkit-media-controls-enclosure {
display: none !important;
}
I want to play video when user comes to the page, it is working fine for all the platform except IOS.
I am using react-player npm. I have tried by passing muted property but doesn't work.
My code looks like this
<ReactPlayer playing=true url="video_url" muted loop=true />
Thanks in advance !
I think you need the playsInline attribute for iOS autoplaying in non-fullscreen, as per https://webkit.org/blog/6784/new-video-policies-for-ios/:
On iPhone, elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
react-player supports it as a prop.
Note that I is uppercase playsInline
// Example #1
<video playsInline />
// Example #2
<Player playsInline attr={someValue}>
I have a video tag.
<video id="video1" poster="{{video.poster}}" ng-click="video.playIt()" controls>
<source src="source.mp4" type="video/mp4">
</video>
I want to be able to click my video's poster or the controls to start the video.
Then be able to pause and play the video by the video's controls or clicking anywhere inside the video element.
Here is my app.js...
$scope.video.playIt = function() {
if (jQuery("#video1").get(0).paused) {jQuery("#video1").get(0).play();}
else {jQuery("#video1").get(0).pause();}
}
At the moment I can start the video by clicking on the poster, and pause / play it by clicking on the video's element. However the controls do not work.
I think there may be a conflict with ng-click. I have added one but I think the video may have one already attached which is why there is a conflict.
Any help would be appreciated.
Thanks