标签: html5-video
缩放HTML5视频和中断宽高比以填充整个站点
我想在网站上使用4:3视频作为背景,但将宽度和高度设置为100%不起作用,因为纵横比保持不变,因此视频不会填满网站的整个宽度.
谢谢你的帮助!
这是我的html和css代码
HTML:
<!DOCTYPE HTML>
<html land="en">
<head>
<link rel="stylesheet" type="text/css" href="html5video.css" />
<title>html 5 video test</title>
</head>
<body id="index">
<video id="vidtest" autoplay>
<source src="data/comp.ogv" type="video/ogg" width="auto" >
</video>
<div class="cv">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum …推荐指数
解决办法
查看次数
如何通过HTML5视频标签播放YouTube视频
这段代码工作了一会但是我认为链接发生了变化,导致第二天找不到它？
在Firefox/Chrome/Opera下播放的视频...如何让视频标签永久播放此视频？!
<video width="480" height="270" controls="controls" style="color:green;">
<source src="youtubelink" type="video/mp4">
<source src="youtubelink" type="video/ogg">
<source src="youtubelink" type="video/webm">
Your browser does not support the video tag.
</video>
推荐指数
解决办法
查看次数
如何在浏览器中播放MKV文件？
我有一个MKV格式的视频文件,我想在浏览器中播放该文件而不进行转换,我如何在浏览器中播放这种文件格式？
<video width="320" height="240" controls>
<source src="movie.mkv" type="video/mkv">
Your browser does not support the video tag.
</video>
我希望这个文件始终以全屏模式播放.我的浏览器是chrome.
推荐指数
解决办法
查看次数
在iPad上寻找HTML5视频
我有一个带有自定义搜索栏的HTML5视频播放器,它在iPhone(在线播放)和浏览器上运行良好.
它在iPad上播放效果也很好,搜索条在电影播放时更新,但出于某种原因,我无法寻求.
所有的值都是正确的,我试图设置:
myPlayer.currentTime = XX;
不幸的是,iPad拒绝设置.currentTime属性.
从我可以收集到的浏览器和iPad之间的区别是我得到的浏览器:
myPlayer.networkState = 3
myPlayer.readyState = 4
在iPad上,我得到:
myPlayer.networkState = 2
myPlayer.readyState = 3
这是完全相同的代码,运行本地MP4视频.
知道为什么会这样吗？
干杯,安德烈
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
iOS5:播放Youtube视频的模态UIViewController中的UIWebView上的异常
更新: iOS 6 beta 1不再出现
我目前正在使用新的iOS 5 SDK调整现有的iOS 4应用程序.我在一个读取Youtube视频的模态视图控制器中呈现UIWebView时发现了一个新的崩溃.
开始阅读视频很好,但是当我尝试全屏设置时,我得到以下异常:
Exception: UIViewControllerHierarchyInconsistency,
child view controller:<UIViewController: 0x6aef180>
should have parent view controller:<WebViewController: 0x6a706c0>
but requested parent is:<MPInlineVideoViewController: 0x6ae5d40>
这是我在主视图控制器中实例化并呈现我的模态视图控制器的方法:
- (IBAction)buttonReleased:(id)sender
{
WebViewController *webVC = [[WebViewController alloc] initWithNibName:@"WebViewController" bundle:[NSBundle mainBundle]];
webVC.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
webVC.modalPresentationStyle = UIModalPresentationPageSheet;
[self presentModalViewController:webVC animated:YES];
}
我使用UIModalPresentationPageSheet作为modalPresentationStyle,当我将此值设置为UIModalPresentationFullScreen时,不再出现错误.
在我的模态WebViewController中,这是我加载Youtube视频的方式:
- (void)viewDidLoad
{
[super viewDidLoad];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.youtube.com/watch?v=bDlm3eLRut0"]]];
}
关于这个问题的任何想法？我可以提供一个完整的示例代码,以便在需要时隔离此崩溃.
谢谢 !
推荐指数
解决办法
查看次数
使youtube.com/embed网址在iOS上运行
对于YouTube上的特定视频,您可以在任何iOS设备上访问http://youtube.com/watch?v=(code)以观看视频.
但是,如果您使用http://youtube.com/embed/(code)网址 - 例如,在网页上的iframe或Colorbox模式中 - 它将无法在iOS上播放.
例如,如果您使用这样的代码:
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
你只看到一个错误:
您的浏览器目前无法识别任何可用的视频格式.点击此处访问有关HTML5视频的常见问题解答.
为了增加对伤害的侮辱,这个链接在iOS上无法点击,所以我不知道会去哪个页面.YouTube上有一个HTML5页面,但它没有说明任何特别有用或令人惊讶的内容.
是否有可用于iframe嵌入的语法在iOS上按预期工作？
推荐指数
解决办法
查看次数
使用vlc将mp4流式传输到html浏览器
我有问题将我的网络摄像头图片(没有声音)流式传输到HTML页面.我正在使用最新的(v2.0.2 vlc for windows)进行流式传输,这是命令行:
"c:\Program Files (x86)\VideoLAN\VLC\vlc.exe" -I dummy dshow:// --dshow-vdev="Logitech QuickCam Chat" --dshow-adev=none --dshow-caching=0 --sout=#transcode{vcodec=h264,vb=1024,channels=1,ab=128,samplerate=44100,width=320}:http{mux=ts,dst=:8080/webcam.mp4}
当我在另一个vlc播放器(http://127.0.0.1:8080/webcam.mp4)中打开流时,我可以观看流,但是当我尝试将其嵌入网页时,我什么都看不见!这是代码:
<!DOCTYPE html>
<html>
<head>
<title>Video Test</title>
</head>
<body>
<video id="video" class="projekktor" autoplay="autoplay" width="300px" preload="metadata">
<source src="http://127.0.0.1:8080/webcam.mp4" />
Your browser doesn't appear to support the HTML5 <code><video></code> element.
</video>
</body>
</html>
比我试图在浏览器中打开它:
file:///C:/videostreaming/video.html
我在chrome示例中看到的是,有网络流量,流正在下载,但没有显示.
推荐指数
解决办法
查看次数
如何在HTML5中隐藏视频标记的全屏按钮
我需要在HTML5中隐藏视频标签的全屏按钮.有没有办法实现它？
谢谢.
推荐指数
解决办法
查看次数
Chrome会在加载页面上挂起许多<video>标记
我有一个页面,其中包含许多<video>元素,一个接一个地排列.
让现在说100.当我点击网页时,Chrome会加载前25个,我可以看到显示的视频图像正常,但随后停止,其余部分保持黑色.我也看到页面仍然正在加载,我看到chrome在页面的左下方说"正在进行...".
使用firefox,我可以毫无问题地加载同一页面.同样使用IE 11,我可以加载相同的页面没有问题,所有视频显示正常.
在这些情况中,我实际上还没有播放视频.这只是等待页面完全加载.
我在我的电脑上使用本地apache服务器.设置是XAMPP软件.所以Apache在我的电脑上运行,我使用localhost访问我的页面.
现在这是我发现的有趣的事情.当我使用file:/// C:/ URI加载页面并使用相同的页面时,现在Chrome显示所有视频元素就好了!他们都不是黑人.它们都显示得很好,我可以毫无问题地播放它们.
该问题仅在使用apache服务器时显示.因此,它是Web服务器和Chrome浏览器之间的缓冲问题.
我知道这是一个缓冲问题,因为如果我移动其中一个仍显示黑色的视频并将链接放在页面顶部,然后重新加载页面,那么它就不再是黑色而且会显示出来.除<video>标签的位置外没有任何变化.那么Chrome似乎限制了一页中可以加载多少个视频标签？
我在Windows 7上使用Chrome 36.0.1985.125.
我尝试使用以下方法更改显示的视频大小:
video {
width: 200px !important;
height: auto !important;
}
但无论我在上面使用什么尺寸,它仍然挂在同一个地方.
有什么建议吗？我可以将网页拆分成许多不同的页面作为最后的手段.
这是Windows 7,64位.video我使用的元素都是一样的.这是一个例子
<P>
<video width="480" height="385" controls>
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</P>
正如我所说,改变宽度和高度没有区别.
我查看了日志文件中的apache(访问日志文件),当我从Chrome加载页面时,我看到了大约206个代码(206是部分内容).以下是一个条目的示例:
[11/Aug/2014:13:17:25 -0500] "GET /my_notes/movie.webm HTTP/1.1" 206 1768659
"http://localhost/my_notes/index.htm" "Mozilla/5.0 (Windows NT 6.1; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36"
当我从firefox加载相同的页面并查看apache日志文件时,我看不到任何206代码.来自 …
推荐指数
解决办法
查看次数