html 播放本地视频(获取磁盘文件url)

html:

<input id="v_file" type="file" onChange="play()"/>
<video id="video" controls="controls" width="640px" height="480">
    你的浏览器貌似不支持video 元素 %>_<%
    <source src="" type="video/mp4">
</video>

script:

function play(){
        var file = document.getElementById('v_file').files[0];
        var url = URL.createObjectURL(file);
        console.log(url);
       	document.querySelector('#video').src = url
    }
### 解决方案 为了使 `QWebEngineView` 能够成功加载并显示本地 HTML 文件,可以采用多种方法来处理路径和文件加载问题。 #### 方法一:构建绝对路径并使用 `load()` 函数 当保存了一个网页作为 HTML 文件,并希望在 `QWebEngineView` 中展示时,需注意路径配置。可以通过获取应用程序目录路径并与目标 HTML 文件名拼接形成完整的文件路径[^1]: ```cpp QString htmlPath = QCoreApplication::applicationDirPath() + "/message/style2.html"; this->load(QUrl::fromLocalFile(htmlPath)); ``` 此方式适用于已知确切位置的情况,确保了路径准确性的同时简化了操作流程。 #### 方法二:直接读取HTML内容再注入到WebView中 另一种做法是从指定的 HTML 文件中读取出其全部内容字符串形式,之后利用 `setHtml()` 接口将其设置给 `QWebEngineView` 实例对象[^2]: ```cpp QString htmlPath = QCoreApplication::applicationDirPath() + "/message/style2.html"; // 打开文件准备读取数据 QFile file(htmlPath); if (!file.open(QIODevice::ReadOnly | QIODevice::Text)) { qDebug() << "Failed to open the file."; } // 创建 QTextStream 对象用于方便地从文件流里提取文本信息 QTextStream stream(&file); // 将整个文档的内容一次性读入内存缓冲区 QString content = stream.readAll(); // 关闭打开过的资源释放句柄 file.close(); // 设置 WebView 的初始页面为刚才读出来的静态网页源码 webView.setHtml(content, QUrl().resolved(QFileInfo(htmlPath).absoluteFilePath())); ``` 这种方法的好处在于可以直接控制要呈现的具体内容而不必担心外部链接的有效性问题;缺点则是对于大型复杂网站可能不太适用因为会占用较多内存空间。 #### 方法三:通过 URL 加载本地文件 如果想要保持原有结构不变,则可以选择直接提供一个指向该 HTML 文档所在磁盘地址的标准 URI 给 `load()` 或者 `setUrl()` 函数调用即可完成任务[^3][^4]: ```cpp QString htmlPath = QCoreApplication::applicationDirPath() + "/message/style2.html"; if (QFile::exists(htmlPath)){ webView.load(QUrl(QString("file:///%1").arg(htmlPath))); } else{ qDebug()<<"The specified path does not exist!"; } ``` 这种方式最为直观简单,在大多数情况下都能正常工作,不过需要注意的是不同操作系统之间关于如何表示文件系统的差异可能会引起兼容性方面的小麻烦。 以上就是几种让 `QWebEngineView` 正确解析并渲染来自本机存储设备上的超文本标记语言的方法介绍。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值