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;
}
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>
[![enter image description here][1]][1]I see lots of Questions regarding ng-click event triggered while swiping images on phone. and there are lots of solutions on this. But I have placeholders when I click on it, it should open a window to select image using ngf-select(danielfarid's) which will open a window when swipe event compeleted, I tried detecting swipe trigger and tried not adding images based on flag set after detecting swipe trigger. But still the window is getting opened as soon as user ended swipe.
I am using bxslider to show gallery where we have pager and the image selected, so when I try to scroll pager in mobile using swipe it causes opening window to select file. as the last three placehodlers have functions to upload image using ngf-select.
this is the code for placeholder i am using to select images
<a ngf-select="uploadImage($files)" >
<i class="fa fa-plus-circle mainimg"></i>
<img ng-src="img/plus.png" class="tb_gal"/>
</a>
So the case of horizontal swipe is handled in v 12.2.5 and this issue is resolved in ng-file-upload/danielfarid v 12.2.5.
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
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">