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
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 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>
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 website that aggregates some FB events for my city and I've tried making it responsive
I'm having an issue opening it in my phone(s3 mini) that the image for the event won't load correctly.. BUT it loads when I try closing that fancybox and opening the a second time, this doesn't occur at all in desktop browsers.. I have no idea on how to fix this, can anyone help?
Address: fubuia.com.br
Here's pics:
Opening an event for the first time
After closing fancybox and opening it again
With some code it would be better...
I think the image is loaded after your fancybox, try to add width and height properties in your images.
<img src="/path/to/your/image.jpg" alt="" height="100" width="100">