如何通过javascript将视频添加到html页面

时间:2019-02-18 09:17:40

标签: javascript html css video responsive-design

我正在尝试将视频添加到html页面,而不通过video标签添加源。

我已经使用html和javascript代码创建了一个.txt文件。

我已将此代码添加到.txt文件中的视频代码中:

video id="Vid" controls="controls"  style="width: 100%; height: 80%; border: thick groove #FF0000" oncontextmenu="return false"

我将该代码添加到了html中,并在脚本标签中添加了:

window.onload = function () {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '../filevideo/video.mp4', true);
      xhr.responseType = 'blob'; //important
      xhr.onload = function (e) {
      if (this.status == 200) {
               console.log("loaded");
               var blob = this.response;
               var video = document.getElementById('Vid');
               video.oncanplaythrough = function () {
                       console.log("Can play through video without stopping");
                                    URL.revokeObjectURL(this.src);
                                };
                                video.src = URL.createObjectURL(blob);
                                video.load();
                            }
                        };
                        xhr.send();
                    }

我想将网站项目中我的视频文件夹中的视频添加到javascript中,而无需将源添加到视频标签中。我试图在浏览器的“保存页面”功能中无法下载视频,但同时在html页面的视频播放器中显示。使用我上面执行的javascript代码,它阻止了视频下载到我的本地主机桌面。我希望人们在javascript中有多个备用代码可以做到这一点。感谢所有阅读和回复的人。

0 个答案:

没有答案