在移动设备的视频标签(HTML5)中使用时,停止下载背景视频

时间:2016-10-17 11:04:10

标签: javascript html html5 video fullpage.js

我在网页的几页上使​​用FullPage.js脚本将视频作为背景嵌入。

类似于此脚本的内容http://www.alvarotrigo.com/fullPage/examples/videoBackground.html

唯一不同的是我的视频大小在3MB到7MB之间。它在桌面上运行良好,同一页面在移动设备上下载速度很慢,因为它还会将视频与网页一起下载。

是否有任何内置功能可阻止视频在移动设备上下载除了使用JavaScript删除class MyForm : Form { // other stuff... private void InitializeComponent() { // initialize... // browseFolder1 // // // browseFolder1.Btn_BrowseDirectory // this.browseFolder1.Button_BrowseDirectory.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Right))); this.browseFolder1.Button_BrowseDirectory.Location = new System.Drawing.Point(365, 0); this.browseFolder1.Button_BrowseDirectory.Margin = new System.Windows.Forms.Padding(3, 0, 0, 0); this.browseFolder1.Button_BrowseDirectory.Name = "Btn_BrowseDirectory"; this.browseFolder1.Button_BrowseDirectory.Size = new System.Drawing.Size(75, 23); this.browseFolder1.Button_BrowseDirectory.TabIndex = 9; this.browseFolder1.Button_BrowseDirectory.Text = "Browse..."; this.browseFolder1.Button_BrowseDirectory.UseVisualStyleBackColor = true; // // browseFolder1.Lbl // this.browseFolder1.Label.AutoSize = true; this.browseFolder1.Label.Location = new System.Drawing.Point(-3, 5); this.browseFolder1.Label.Margin = new System.Windows.Forms.Padding(0); this.browseFolder1.Label.Name = "Lbl"; this.browseFolder1.Label.Size = new System.Drawing.Size(31, 13); this.browseFolder1.Label.TabIndex = 8; this.browseFolder1.Label.Text = "Text:"; this.browseFolder1.Location = new System.Drawing.Point(53, 86); this.browseFolder1.Margin = new System.Windows.Forms.Padding(3, 1, 3, 1); this.browseFolder1.Name = "browseFolder1"; this.browseFolder1.Size = new System.Drawing.Size(440, 22); this.browseFolder1.TabIndex = 8; // // browseFolder1.TxtBox_DirectoryFullPath // this.browseFolder1.TextBox_DirectoryFullPath.Anchor = ((System.Windows.Forms.AnchorStyles)(((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Left) | System.Windows.Forms.AnchorStyles.Right))); this.browseFolder1.TextBox_DirectoryFullPath.DataBindings.Add(new System.Windows.Forms.Binding("Text", this.browseFolder1.FolderBrowserDialog, "SelectedPath", true)); this.browseFolder1.TextBox_DirectoryFullPath.Location = new System.Drawing.Point(31, 2); this.browseFolder1.TextBox_DirectoryFullPath.Margin = new System.Windows.Forms.Padding(3, 0, 3, 0); this.browseFolder1.TextBox_DirectoryFullPath.Name = "TxtBox_DirectoryFullPath"; this.browseFolder1.TextBox_DirectoryFullPath.Size = new System.Drawing.Size(328, 20); this.browseFolder1.TextBox_DirectoryFullPath.TabIndex = 7; // initialize... } // controls fields declerations... }

src="video1.mp4"

此外,当我测试同一个网站pingdom.com网站时,它会多次下载相同的视频文件,这会增加页面大小。我只注意到这个网站速度测试平台。当我使用Firebug进行测试时,它只下载一次视频文件。

https://tools.pingdom.com/#!/coQYIA/http://www.alvarotrigo.com/fullPage/examples/videoBackground.html

1 个答案:

答案 0 :(得分:0)

据我所知,视频不会在iOS中自动播放。不确定它在其他设备或操作系统上是如何工作的,但我会说它们不会在iOS设备中下载。

对于其他人,我猜你可以使用回调afterResponsive,一旦页面以响应模式进入或退出,它将会触发。 这意味着您可以使用此方法检测何时处于“移动设备”中,然后执行您想要执行的任何操作。

更多信息in the docs

更新

似乎从iOS 10对自动播放的限制已被删除到某些没有音频的视频。 Check this other answer for more info