如何使用HTML5视频标签播放本地（硬盘）视频文件？

通过输入元素选择文件。

更改事件被触发

当用户对元素的值进行更改时，、 和 元素的事件将被触发。</ p><h2>获取 File 对象</h2><p>File 接口提供有关文件的信息，并允许网页中的 JavaScript 访问内容。这种类型的对象由 HTML <input> 元素的 files 属性返回，最终允许您访问使用 <input type="file"> 元素选择的文件列表。</p><h2>对象 URL 指向到 File 对象</h2><p>使用 URL.createObjectURL() 静态方法创建一个 DOMString，其中包含表示参数中给定对象的 URL。</p><h2>将对象 URL 设置为视频。 src 属性</h2><p>最后，这是视频的可见方式。使用 src 属性添加视频文件的位置 (URL)。</p> <div style="float: right;overflow: hidden;height: 20px;line-height: 16px;font-size: 14px;color:gray;"> 来源：<a href="https://www.tutorialspoint.com/Play-local-hard-drive-video-file-with-HTML5-video-tag" class="aBlack" title="https://www.tutorialspoint.com/Play-local-hard-drive-video-file-with-HTML5-video-tag" target="_blank" rel="nofollow">https://www.tutorialspoint.com/Play-local-hard-drive-video-file-with-HTML5-video-tag</a> </div> </div> <div class="ngfSypBox"> <a href="https://www.jiaoben.net/article/55378.html" class="aBlue" title="">上一篇　在HTML中的移动网页浏览器上下拉刷新</a> <a href="https://www.jiaoben.net/article/55380.html" class="aBlue" title="">下一篇　我们如何在HTML文档中包含一个部分？</a> <div class="clear"></div> </div> </div> </div> <div class="ngfXlhBox"> <div class="ngfTjzxIn"> <div class="ngfTjzxTitle"> <b></b> <h2>本类最新</h2> <span> <a href="https://www.jiaoben.net/articlelist/21_1.html" title="查看更多" target="_blank" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfSpjcList"> <li> <a href="https://www.jiaoben.net/article/302378.html" class="aBlack" target="_blank" title="百分比布局真的会影响页面性能吗？该如何优化？"> <span><img data-src="/uploads/20250223/174032391367bb3c49c8b11.jpg" alt="百分比布局真的会影响页面性能吗？该如何优化？" class="lazyload" src="/uploads/20250223/174032391367bb3c49c8b11.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>百分比布局真的会影响页面性能吗？该如何优化？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/295634.html" class="aBlack" target="_blank" title="2月艺术挑战"> <span><img data-src="/uploads/20250223/174032301367bb38c54593b.jpg" alt="2月艺术挑战" class="lazyload" src="/uploads/20250223/174032301367bb38c54593b.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>2月艺术挑战</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/243138.html" class="aBlack" target="_blank" title="如何在B站主页顶部使用Blob链接创建横幅？ "> <span><img data-src="/uploads/20250223/174031563467bb1bf2b339f.jpg" alt="如何在B站主页顶部使用Blob链接创建横幅？ " class="lazyload" src="/uploads/20250223/174031563467bb1bf2b339f.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何在B站主页顶部使用Blob链接创建横幅？ </p> </a> </li> <li> <a href="https://www.jiaoben.net/article/247038.html" class="aBlack" target="_blank" title="如何使用 JavaScript 实现点击链接后延迟跳转？ "> <span><img data-src="/uploads/20250223/174030411367baeef1942fd.jpg" alt="如何使用 JavaScript 实现点击链接后延迟跳转？ " class="lazyload" src="/uploads/20250223/174030411367baeef1942fd.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何使用 JavaScript 实现点击链接后延迟跳转？ </p> </a> </li> <li> <a href="https://www.jiaoben.net/article/238590.html" class="aBlack" target="_blank" title="如何防止 CSS Grid 布局中子元素撑大父容器？"> <span><img data-src="/uploads/20250223/174030249367bae89de83f5.jpg" alt="如何防止 CSS Grid 布局中子元素撑大父容器？" class="lazyload" src="/uploads/20250223/174030249367bae89de83f5.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何防止 CSS Grid 布局中子元素撑大父容器？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/240331.html" class="aBlack" target="_blank" title="如何实现容器内元素按比例和间距平均分布？"> <span><img data-src="/uploads/20250223/174030087367bae2496e13b.jpg" alt="如何实现容器内元素按比例和间距平均分布？" class="lazyload" src="/uploads/20250223/174030087367bae2496e13b.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何实现容器内元素按比例和间距平均分布？</p> </a> </li> <div class="clear"></div> </ul> </div> </div> </div> <div class="ngfRight"> <div class="ngfJxydBox"> <div class="ngfJxydIn"> <div class="ngfTjzxTitle"> <b></b> <h2>热门推荐</h2> <span> <a href="https://www.jiaoben.net/articlelist/21_1.html" target="_blank" title="查看更多" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfJxydList"> <li> <span><a href="https://www.jiaoben.net/article/280068.html" target="_blank" title="轻松网页设计必须了解的 Tailwind CSS 类"><img data-src="/uploads/20250212/173933985667ac385079e44.png" alt="轻松网页设计必须了解的 Tailwind CSS 类" class="lazyload" src="/uploads/20250212/173933985667ac385079e44.png" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/280068.html" target="_blank" title="轻松网页设计必须了解的 Tailwind CSS 类" class="aBlack">轻松网页设计必须了解的 Tailwind CSS 类</a></dt> <dd> <em><b class="icon1"></b>500</em> <em><b class="icon2"></b>2025-02-12</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/278210.html" target="_blank" title="使用 React 的 useBreakpoints Hook 征服断点"><img data-src="/uploads/20250125/17378012246794be08826bf.jpg" alt="使用 React 的 useBreakpoints Hook 征服断点" class="lazyload" src="/uploads/20250125/17378012246794be08826bf.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/278210.html" target="_blank" title="使用 React 的 useBreakpoints Hook 征服断点" class="aBlack">使用 React 的 useBreakpoints Hook 征服断点</a></dt> <dd> <em><b class="icon1"></b>500</em> <em><b class="icon2"></b>2025-01-25</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/252442.html" target="_blank" title="如果同源策略失效，其他网站如何获取你的 Cookie？ "><img data-src="/uploads/20250212/173934419167ac493f43406.jpg" alt="如果同源策略失效，其他网站如何获取你的 Cookie？ " class="lazyload" src="/uploads/20250212/173934419167ac493f43406.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/252442.html" target="_blank" title="如果同源策略失效，其他网站如何获取你的 Cookie？ " class="aBlack">如果同源策略失效，其他网站如何获取你的 Cookie？ </a></dt> <dd> <em><b class="icon1"></b>497</em> <em><b class="icon2"></b>2025-02-12</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/241548.html" target="_blank" title="如何利用 HTML DOM 树形对象模型实现动态网页交互？ "><img data-src="/uploads/20250211/173923203667aa932487b71.jpg" alt="如何利用 HTML DOM 树形对象模型实现动态网页交互？ " class="lazyload" src="/uploads/20250211/173923203667aa932487b71.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/241548.html" target="_blank" title="如何利用 HTML DOM 树形对象模型实现动态网页交互？ " class="aBlack">如何利用 HTML DOM 树形对象模型实现动态网页交互？ </a></dt> <dd> <em><b class="icon1"></b>497</em> <em><b class="icon2"></b>2025-02-11</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/250042.html" target="_blank" title="绝对定位元素如何相对于内容框偏移？"><img data-src="/uploads/20250211/173923347867aa98c645783.jpg" alt="绝对定位元素如何相对于内容框偏移？" class="lazyload" src="/uploads/20250211/173923347867aa98c645783.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/250042.html" target="_blank" title="绝对定位元素如何相对于内容框偏移？" class="aBlack">绝对定位元素如何相对于内容框偏移？</a></dt> <dd> <em><b class="icon1"></b>491</em> <em><b class="icon2"></b>2025-02-11</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="https://www.jiaoben.net/article/250446.html" target="_blank" title="如何用 HTML 文本域实现自动换行、去除尾数 0 的纯数字输入？ "><img data-src="/uploads/20250129/17381232356799a7e38fc68.jpg" alt="如何用 HTML 文本域实现自动换行、去除尾数 0 的纯数字输入？ " class="lazyload" src="/uploads/20250129/17381232356799a7e38fc68.jpg" onerror="this.src='/statics/moren/120_120.png'"/></a></span> <dl> <dt><a href="https://www.jiaoben.net/article/250446.html" target="_blank" title="如何用 HTML 文本域实现自动换行、去除尾数 0 的纯数字输入？ " class="aBlack">如何用 HTML 文本域实现自动换行、去除尾数 0 的纯数字输入？ </a></dt> <dd> <em><b class="icon1"></b>489</em> <em><b class="icon2"></b>2025-01-29</em> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </li> </ul> </div> </div> <div class="ngfJxydBox"> <div class="ngfJxydIn"> <div class="ngfTjzxTitle"> <b></b> <h2>热门教程</h2> <span> <a href="https://www.jiaoben.net/articlelist" title="查看更多" class="bBlack"> <i>查看更多</i> <em></em> <div class="clear"></div> </a> </span> <div class="clear"></div> </div> <ul class="ngfRmspList"> <li> <a href="https://www.jiaoben.net/article/178187.html" title="使用 Golang 框架时的性能优化策略有哪些？" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250203/173855523867a03f6632438.jpg" alt="使用 Golang 框架时的性能优化策略有哪些？" class="lazyload" src="/uploads/20250203/173855523867a03f6632438.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>使用 Golang 框架时的性能优化策略有哪些？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/283915.html" title="支付宝注册时间在哪里看 支付宝查看账号注册时间教程介绍" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250219/173997705667b5f16060c32.png" alt="支付宝注册时间在哪里看 支付宝查看账号注册时间教程介绍" class="lazyload" src="/uploads/20250219/173997705667b5f16060c32.png" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>支付宝注册时间在哪里看 支付宝查看账号注册时间教程介绍</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/247317.html" title="如何正确使用电脑连接热点Wifi？" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250125/173778501567947eb7e39b6.jpg" alt="如何正确使用电脑连接热点Wifi？" class="lazyload" src="/uploads/20250125/173778501567947eb7e39b6.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何正确使用电脑连接热点Wifi？</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/163090.html" title="韩小圈怎么打开夜间模式 打开夜间模式的操作方法" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250128/173802479167982757afdee.png" alt="韩小圈怎么打开夜间模式 打开夜间模式的操作方法" class="lazyload" src="/uploads/20250128/173802479167982757afdee.png" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>韩小圈怎么打开夜间模式 打开夜间模式的操作方法</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/298019.html" title="如何取消钉钉打卡个性主题设置" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250223/174027153467ba6fae633ed.png" alt="如何取消钉钉打卡个性主题设置" class="lazyload" src="/uploads/20250223/174027153467ba6fae633ed.png" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>如何取消钉钉打卡个性主题设置</p> </a> </li> <li> <a href="https://www.jiaoben.net/article/178453.html" title="欧盟对中国电动汽车进行深入调查，背后的‘小动作’也被揭露" target="_blank" class="aBlack"> <span><img data-src="/uploads/20250221/174014140167b87359b924a.jpg" alt="欧盟对中国电动汽车进行深入调查，背后的‘小动作’也被揭露" class="lazyload" src="/uploads/20250221/174014140167b87359b924a.jpg" onerror="this.src='/statics/www/2020images/moren/355_225.png'"/></span> <p>欧盟对中国电动汽车进行深入调查，背后的‘小动作’也被揭露</p> </a> </li> <div class="clear"></div> </ul> </div> </div> <!--热门应用 end--> </div> <!--右边 end--> <div class="clear"></div> </div> <div class="sy_footer"> <footer> <div class="footer_cont"> <div class="footcont_left"> <a href="#"> <img style="width: 300px;" src="https://www.jiaoben.net/statics/www/2020images/footer-logo.png" alt=""> </a> </div> <em class="fot_line"></em> <div class="footcont_right"> <p>版权所有：jiaoben.net Copyright 2020~2025</p> <p>本站所有软件、源码、文章均有网友提供，如有侵权联系jiaobennet@163.com</p> <p><a style="color: #999999" href="https://beian.miit.gov.cn/" target="_blank">湘ICP备2022002427号</a></p> </div> <div class="clear"></div> </div> </footer> </div> <!--右侧导航--> <div class="ngfYoucBox" id="menuRight"> <a href="https://m.jiaoben.net" class="aBlue"> <b class="icon1" style="float: none;"></b> <p>手机版</p> </a> <a href="javascript:scroll(0,0)" class="cBlack"> <b class="icon2"></b> <p>返回顶部</p> </a> </div> <!--右侧导航 end--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d7dfe7acaf9cb2eaf7c319afb7d1c287"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <div class="ngfZuocBox" id="menuLeft"> <a href="https://www.jiaoben.net/articlelist/31_1.html" title="软件教程">软件教程</a> <a href="https://www.jiaoben.net/articlelist/30_1.html" title="数据库">数据库</a> <a href="https://www.jiaoben.net/articlelist/29_1.html" title="linux">linux</a> <a href="https://www.jiaoben.net/articlelist/28_1.html" title="网络安全">网络安全</a> <a href="https://www.jiaoben.net/articlelist/25_1.html" title="MySql">MySql</a> <a href="https://www.jiaoben.net/articlelist/21_1.html" title="HTML+CSS">HTML+CSS</a> <a href="https://www.jiaoben.net/articlelist/20_1.html" title="JavaScript">JavaScript</a> <a href="https://www.jiaoben.net/articlelist/19_1.html" title="C++">C++</a> <a href="https://www.jiaoben.net/articlelist/18_1.html" title="goLang">goLang</a> <a href="https://www.jiaoben.net/articlelist/17_1.html" title="php">php</a> <a href="https://www.jiaoben.net/articlelist/16_1.html" title="Python">Python</a> <a href="https://www.jiaoben.net/articlelist/15_1.html" title="java">java</a> </div> </body> </html>