Question

我正在尝试设置一个非常基本的html5页面来加载一个20MB的.mp4视频。浏览器似乎需要下载整个内容，而不仅仅是播放视频的第一部分和其他内容。

This post是我在搜索时发现的最接近的东西......我尝试过Hand Brake和Data Go Round，但两者似乎没有任何区别：

有关如何执行此操作或是否可能的任何想法？

以下是我正在使用的代码：

<video controls="controls">
    <source src="/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Answer 1

Ensure that the moov (metadata) is before the mdat (audio/video data)。这也称为“快速启动”或“网络优化”。例如，Handbrake has a "Web Optimized" checkbox，ffmpeg和avconv的输出选项为-movflags faststart。
确保您的网络服务器报告的内容类型正确（video / mp4）。
Ensure that your web server is configured to serve byte range requests。
确保您的网络服务器未在mp4文件中的压缩之上应用gzip或deflate压缩。

您可以使用curl -I http://yoursite/video.mp4或使用浏览器中的开发人员工具（Chrome，Firefox）检查您的网络服务器发送的标头（如果缓存了则重新加载页面）。 HTTP响应标头应包括内容类型：视频/ mp4 和接受范围：字节，并且不包含内容编码：。

Answer 2

以下是我用于在C＃（MVC）中创建Web API控制器的解决方案，该解决方案将使用字节范围（部分请求）提供视频文件。部分请求允许浏览器仅下载尽可能多的视频而不是下载整个视频。这使它更有效率。

请注意，这仅适用于最新版本。

library(reshape2)
library(ggplot2)

# Generate test data frame
df=reshape2::melt(outer(1:4, 1:4), varnames = c("X1", "X2"))

# Declare theme
mytheme=theme_classic(base_size=15) + 
  theme(axis.title.x=element_blank(),axis.title.y=element_blank(),
        axis.text.x=element_blank(),axis.text.y=element_blank(),
        axis.ticks=element_blank()) + 
  theme(legend.position=c(0,1), legend.justification=c(0,1),
        legend.title=element_text(size="12",face = "bold"))

# Plot
p=ggplot(data=df, aes_string(x="X1", y="X2")) +
  geom_tile(aes(fill=value))+
  scale_fill_gradient(low="yellow",high="red",guide="colourbar",name="Titleggplot") +
  annotate("text",x=Inf,y=Inf,label="(a)" ,hjust=1.5, vjust=1.5, size=6) +
  mytheme
p

#*** Things I tried (building on the defaults above) that do not work

# 1 - set "vjust" in theme
mytheme=mytheme+theme(legend.title=element_text(size="12",face = "bold",vjust=2))
p=p+mytheme
p
# Result: does nothing

# 2 - set "legend.title.align" in theme
mytheme=mytheme+theme(legend.title.align=4)
p=p+mytheme
p
# Result: adjusts horizontal position but does not change vertical position

# 3 - increase margins around title object
mytheme=mytheme+theme(legend.title=element_text(margin=margin(0,0,20,0),size="12",face="bold"))
p=p+mytheme
p
# Result: does nothing

# 4 - using "guide" in scale_fill_gradient
p=ggplot(data=df, aes_string(x="X1", y="X2")) +
  geom_tile(aes(fill=value))+
  scale_fill_gradient(low="yellow",high="red",guide=guide_colorbar(title="Titleggplot",title.vjust=2)) +
  annotate("text",x=Inf,y=Inf,label="(a)" ,hjust=1.5, vjust=1.5, size=6) +
  mytheme
p
# Result: does nothing

# 5 - using "guides" as separate element
p=p+guides(fill=guide_legend(title.vjust=2))
# Restult: does nothing

# 6 - I could manually add a line break (\n) to the title
p=ggplot(data=df, aes_string(x="X1", y="X2")) +
  geom_tile(aes(fill=value))+
  scale_fill_gradient(low="yellow",high="red",guide="colourbar",name="Titleggplot\n") +
  annotate("text",x=Inf,y=Inf,label="(a)" ,hjust=1.5, vjust=1.5, size=6) +
  mytheme
p
# Result: increases the space but I can't smoothly adjust the spacing and an entire blank line is in my case too much.

HTML5 - 如何流式传输大型.mp4文件？

2 个答案: