how to disable some options from the right click menu of a video tag like on deeplearning.ai website. Screenshot is attached
I want to know how we can disable some options from the right click menu of a video element on our site like for example - how the developers of deeplearning.ai website disabled some of the menu options when a user right clicks there video.
You need to use the MediaSource API (sometimes called MSE) to play the video file.
See this example of a video played via MSE. View its source code or read an article like this one.
What the website is doing...
Usually you would export a fragmented MP4 (in a video editor) and then feed the chunks into MSE. It's this chunking process that makes it such that, there is no "one file" to download. Hence the option is disabled.
In the case of the website, they are using an M3U8 playlist to play chunks of MPEG-TS video files. Since MSE does not support .ts data from the .m3u8 file, a special player (Video-JS) is used to extract and feed chunks into MSE. It can be done manually but the website is preferring to use VideoJS to play their .m3u8 file.
- ENOLOCK npm ERR! Error while running npm audit fix
- javascript onsubmit not working
- Embed image in email body nodemailer nodejs
- Detect Back Button in Navigation Guards of Vue-Router
- Error: Could not access built-in Node.js modules
- Failed to execute removeChild on Node
- Error: Cannot find module 'node:util' while running the nuxt project using npm run command
- Recharts issue with gaps between Bars
- google closure compiler - double compilation
- Which library should I use for server-side image manipulation on Node.JS?
- Stop propagation of 'click' event in Leaflet
- Creating new objects from frozen parent objects
- How to redirect to an "about:" URL
- How to convert FormData (HTML5 object) to JSON
- dynamically pass unknown number of parameters to react router
- What is the difference between a comparison operator and a logical operator?
- How to convert date to timestamp?
- Context Provider Specification
- Get previous page phonegap javascript
- Displaying date/time in user's timezone - on client side
- Google App Script to imitate File - Import csv file into a sheet using a custom menu item
- Intl.NumberFormat alter minus symbol
- Loading data server side and allow global access client side
- Set default value of Javascript object attributes
- Vue3 @update:modelValue NOT working on objects?
- Failed to resolve component: google-pay-button
- Vue.js 3 - instance without a component?
- When to use const with objects in JavaScript?
- Vue.js iterate complex object by data key
- Vuejs 3 query value in Json Object based on key