HTML5 video controlslist All In One

艾儿喂 發表於 2022-6-13 16:20:00

<h1 id="html5-video-controlslist-all-in-one">HTML5 video controlslist All In One</h1>
<blockquote>
<p><code>controlslist="nodownload"</code> 属性, 禁用视频播放器的下载选项</p>
</blockquote>
<pre><code class="language-html"><div class="video-wapper">
<video controls="" controlslist="nodownload" class="video" src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4"></video>
</div>
</code></pre>
<h2 id="htmlmediaelementcontrolslist"><code>HTMLMediaElement.controlsList</code></h2>
<p>The controlsList property of the <code>HTMLMediaElement</code> interface returns a <code>DOMTokenList</code> that helps the user agent select what <code>controls</code> to show on the media element whenever the user agent shows its own set of controls.<br>
The DOMTokenList takes one or more of three possible values: <code>nodownload</code>, <code>nofullscreen</code>, and <code>noremoteplayback</code>.</p>
<p><img src="https://img2022.cnblogs.com/blog/740516/202206/740516-20220613160313606-1794444080.png" alt="" loading="lazy"></p>
<blockquote>
<p>71.58% support ✅</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/740516/202206/740516-20220613160930257-2048778172.png" alt="" loading="lazy"></p>
<p>https://caniuse.com/?search=controlslist</p>
<pre><code class="language-html">
<div class="video-wapper">
<h2>默认，不使用 controlslist</h2>
<video
controls
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
</div>

<div class="video-wapper">
<h2>controlslist="nodownload" 单个值</h2>
<video
controls
controlslist="nodownload"
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
</div>

<div class="video-wapper">
<h2>controlslist="nofullscreen" 单个值</h2>
<video
controls
controlslist="nofullscreen"
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
</div>

<div class="video-wapper">
<h2>controlslist="nodownload,nofullscreen,noremoteplayback" 多个值,逗号分隔 ❌</h2>
<video
controls
controlslist="nodownload,nofullscreen,noremoteplayback"
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
</div>

<div class="video-wapper">
<h2>controlslist="nodownload nofullscreen noremoteplayback" 多个值，空格分隔 ✅</h2>
<video
controls
controlslist="nodownload nofullscreen noremoteplayback"
src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
</video>
</div>
</code></pre>
<iframe height="600" style="width: 100%" scrolling="no" title="HTML5 video controlslist All In One" src="https://codepen.io/xgqfrms/embed/ZErVyov?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/xgqfrms/pen/ZErVyov">
HTML5 video controlslist All In One</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<p>https://googlechrome.github.io/samples/media/controlslist.html<br>
https://storage.googleapis.com/media-session/caminandes/short.mp4#t=80</p>
<h2 id="demo">demo</h2>
<blockquote>
<p>破解 js 禁用浏览器 debugger 功能</p>
</blockquote>
<p>https://xiaochen1024.com/series/6196129fc1553b002e57bef5</p>
<ol>
<li>首先在一个空白页面，打开 Chrome devtools, 选择<code>单独窗口</code> 模式</li>
</ol>
<p><code>dock into a separate window</code></p>
<p><img src="https://img2022.cnblogs.com/blog/740516/202206/740516-20220613154257193-1161893405.png" alt="" loading="lazy"></p>
<ol start="2">
<li>禁用 <code>controlslist="nodownload"</code> 属性</li>
</ol>
<pre><code class="language-html"><div class="videoWapper">
<video controls="" controlslist="nodownload" class="video" src="https://mpvideo.qpic.cn/0bc3qiaa4aaaauaeiemdarqvbawdb2baadqa.f10002.mp4"></video>
</div>
</code></pre>
<pre><code class="language-html"><div class="videoWapper">
<video controls="" class="video" src="https://mpvideo.qpic.cn/0bc3qiaa4aaaauaeiemdarqvbawdb2baadqa.f10002.mp4"></video>
</div>
</code></pre>
<ol start="3">
<li>获取待爬取视频 URL</li>
</ol>
<p><code>https://mpvideo.qpic.cn/0bc3qiaa4aaaauaeiemdarqvbawdb2baadqa.f10002.mp4</code></p>
<blockquote>
<p>禁用前 ❌</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/740516/202206/740516-20220613154723008-845400667.png" alt="" loading="lazy"></p>
<p><img src="https://img2022.cnblogs.com/blog/740516/202206/740516-20220613155151939-435315266.png" alt="" loading="lazy"></p>
<blockquote>
<p>破解后 ✅</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/740516/202206/740516-20220613154212496-1627108156.png" alt="" loading="lazy"></p>
<div class="video-wapper">
<video controls="" class="video-player" src="https://mpvideo.qpic.cn/0bc3qiaa4aaaauaeiemdarqvbawdb2baadqa.f10002.mp4">
</video>
</div>
<p>结论：<code>纯前端</code>技术根本防不住被爬取的，需要在<code>服务端</code>进行更加精细的访问控制 <code>CORS</code> 白名单，stream data, 限制 ip 连接数和频率...</p>
<h2 id="nodejs-如何在服务端实现禁用视频下载功能">Node.js 如何在<code>服务端</code>实现<code>禁用视频下载</code>功能</h2>
<p>原理分析：</p>
<p>服务端识别出客户端的下载请求<br>
服务端返回错误文件类型，导致下载资源找不到，从而导致下载失败</p>
<p>疑问：<br>
如何实现可以正常播放视频，但无法下载视频</p>
<ol>
<li>流媒体，授权 token</li>
<li>禁用非授权 iframe 和批量下载</li>
</ol>
<blockquote>
<p><code>微信公众号</code>，点击下载视频时候，服务端会自动返回 .txt 错误文件, 导致<code>下载失败</code> ❌</p>
</blockquote>
<p><img src="https://img2024.cnblogs.com/blog/740516/202406/740516-20240630132328161-563461862.png" alt="image" loading="lazy"></p>
<p>https://www.cnblogs.com/xgqfrms/p/18276259#:~:text=com/s/MrT7EWxwJ5JWEzPB90wShg-,破解微信禁用视频下载,-破解 HTML5 video</p>
<h2 id="refs">refs</h2>
<p>https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList</p>
<blockquote>
<p>video 禁用下载</p>
</blockquote>
<p>controlslist="nodownload"</p>
<p>https://www.cnblogs.com/xgqfrms/p/16371270.html</p>
<p><img src="https://img2022.cnblogs.com/blog/740516/202211/740516-20221124190631168-1369989934.png" alt="" loading="lazy"></p>
<p>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes</p>
<blockquote>
<p>audio 禁用下载</p>
</blockquote>
<p>controlslist="nodownload"</p>
<p><img src="https://img2022.cnblogs.com/blog/740516/202211/740516-20221124190400529-1933669448.png" alt="" loading="lazy"></p>
<p>https://www.cnblogs.com/xgqfrms/p/16709372.html</p>
<p>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#attributes</p>
<hr>
<div>

</div>
<hr>
<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none">
<h3><strong><span style="font-size: 16pt; color: rgba(0, 255, 0, 1)">©xgqfrms 2012-<span data-uid="copyright-aside">2020</span></span></strong>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！</strong></span></p>
</h3></blockquote>
<hr>

</div>
<div id="MySignature" role="contentinfo">
<div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;">
<p>本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/16371270.html</p>
<p style="color: red; font-size: 23px; margin-top: 5px; margin-botom: 5px;">未经授权禁止转载，违者必究！</P>
</div>
<hr/><br><br>
来源：https://www.cnblogs.com/xgqfrms/p/16371270.html

頁: [1]

琼殿技术论坛's Archiver

HTML5 video controlslist All In One