天道酬勤,学无止境

html5-video

What are the differences between using an HTML5 embedded video vs. an iframe with a YouTube link?

I'm debating whether or not to store a video on my server and call it through an HTML5 tag, or upload the video onto YouTube and use an iframe to embed the YouTube link. I'm not sure which would work more efficiently, or the differences between each one. What are the differences between using a HTML5 video tag and using a YouTube link and iframe tag?

2022-06-06 14:01:07    分类:问答    html   video   iframe   html5-video

OpenLayers - Video layer

问题 我想在 OpenLayers 地图(目前使用 OL4)上展示视频(使用<video></video>元素) 我知道叠加可以帮助我在地图上显示视频,但是如果我想在上面添加图层,叠加就在这些图层的顶部。 目前有办法(在任何 OL 版本中)这样做吗? 回答1 有一种方法,通过使用postcompose钩子。 @tschaub 很久以前就创建了一个示例。 请参阅 http://tschaub.net/ol3-video/examples/video.html。 我已经从中创建了一个使用最新 OpenLayers 版本的 CodePan。 请参阅 http://codepen.io/anon/pen/GWQqzj。 postcompose钩子如下所示: layer.on('postcompose', function(event) { var frameState = event.frameState; var resolution = frameState.viewState.resolution; var origin = map.getPixelFromCoordinate(topLeft); var context = event.context; context.save(); context.scale(frameState.pixelRatio, frameState

2022-05-16 11:27:43    分类:技术分享    html5-video   openlayers

What is the form input type for posting blob from an HTML Form?

问题 我想将录制的视频(保存为 blob)包含到将要发布的表单中。 两个问题: 发布 blob 所需的输入类型是什么? 如何将 blob 分配给该输入类型? 我所看到的一些建议使用输入类型的文件。 示例表格: <form method="POST> <input type="text" class="hidden" name="filename"/> <input type="<UNKNOWN>" class="hidden" name="filedata"/> <input type="submit" /> </form> 我假设我会做类似的事情 $("[name=filename]").val(myBlob) 回答1 我认为将 blob 附加到表单的唯一方法是使用 FormData() 对象。 var formData = new FormData(); formData.append("name", blob, filename); 然后使用 XMLHttpRequest 发送表单,例如: var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.send(formData); 因此,如果您需要将此 blob 与其他表单信息一起发送,您可以将普通表单数据附加到您的 FormData 对象并发送整个内容。

2022-05-14 00:49:03    分类:技术分享    javascript   forms   file-upload   html5-video

NodeJS Streaming for Audio/Video with Client Side Control

问题 我正在构建一个简单的流媒体服务器来流式传输音频/视频。 下面的代码完成了工作,但是当我点击视频上的时间线时,什么也没有发生,因为我无法从那个时间获取。 还需要将有关 clikc 的事件发送到我单击的 nodejs 流和流。 我已经能够想出这个。 我使用 URL sendFile="some file" 发送文件,然后节点检查该文件。 如果成功,我开始在客户端获取流,然后将其直接放入视频 src。 但我需要对此进行更多控制。 例如当用户点击某个时间线时,我可以直接从那里开始流式传输。 app.get 用于获取我存储文件的文件夹的位置。 仅使用 express 和 nodejs function FolderReaderMerger(path,pathToMerge,cb) { log("Reading File/Folder To Combine : "); fs.readdir(path, function(err, audio) { fs.readdir(pathToMerge, function(err, audioText) { var obj ={}; global.list.audio =audio; global.list.audioText =audioText; obj.audio = audio; obj.audioText = audioText; cb

2022-05-11 17:10:09    分类:技术分享    javascript   node.js   express   socket.io   html5-video

jQuery Overlay Image on HTML5 Video

问题 我正在尝试构建一个小型实用程序,让某人可以开始观看 HTML5 视频(不是 YouTube - 这将从托管该站点的同一服务器流式传输),单击视频的特定区域,让它暂停并放一个小在他们点击的视频上画圈。 一旦发生这种情况,将弹出一个小窗口,以便用户可以评论说明他们点击那里的原因(视频中有问题等)。 基本的 HTML 结构是这样的: <div id="videoContainer" style="margin-left: auto; margin-right: auto; height: 550px; width: 950px; background-color: #fff"> <video id="pcVideo" src="fvb0375.mov" style="margin-left: auto; margin-right: auto; height: 550px; width: 950px; display:inline;" preload="auto" controls></video> </div> 可以忽略自定义样式 - 这只是将视频在屏幕上居中,具有以后不会使用的通用高度/宽度。 页面上的JS(点击视频时处理)是这样的: $("#pcVideo").click(function(e) { //height and width of the container var

2022-05-11 11:51:05    分类:技术分享    jquery   css   html   html5-video   overlay

Does html5 video work on android nexus one with android version 2.1?

问题 我正在尝试获得一个在 Android 2.1 上运行的 html5 演示页面,已经尝试了 2.1 的 droid 和 nexus 之一,但它们只显示海报图像,不播放视频。 按下视频没有任何作用。 编辑 - 使用视频标签上的 onclick 处理程序解决 这个时候android 2.1浏览器可以用html5视频吗? 我的演示页面适用于 iphone 和 ipad。 mp4 视频:avc1、29.97 fps、380 kbps、480 x 370 音频:mp4a、44 kHz、64 kbps 以下是页面的编写方式: <!DOCTYPE html> <html><head><title>html5 test</title></head><body> <video id="movie" width="480" height="370" poster="http://example.com/still.jpg" controls> <source src="http://example.com/video.mp4" type="video/mp4"> Your browser does not support html5 video. </video> </body></html> 回答1 更新:使用 Android 2.1,我可以通过在视频标签中添加onclick="this

2022-05-09 03:18:10    分类:技术分享    android   html   html5-video

Opening an activity with a webview containing a HTML5 video for a second time

问题 我正在使用 Appcelerator Titanium 在 Android 的 web 视图中提供视频。 在 iOS 上,这就像一个魅力。 但在 Android 上,这会带来一些问题。 第二次使用包含 html5 视频元素的 web 视图打开活动时会出错。 重现步骤: (另请参阅此 youtube 视频:http://www.youtube.com/watch?v=0MpSpfJNyOk) 第一次使用 html5 视频打开视频/活动时,它会显示视频并且我可以播放它。 当我关闭窗口/活动并打开一个带有另一个视频的新窗口时,webview 会加载并且 html5 视频播放也会加载。 但是玩它是不可能的。 当按下全屏按钮并按下播放/暂停按钮两次时,视频开始全屏播放。 在关闭活动/窗口之前暂停视频时,下一个窗口中的视频可以播放。 youtube 视频显示了使用此测试项目 https://dl.dropboxusercontent.com/u/1849335/WebviewTest.zip 在运行 Android 4.2 的三星 Galaxy Tab 3 10.1" 上的行为 你可以理解我花了一段时间才理解这种模式:) 语境: 我正在使用 3.2.GA Titanium SDK 与此修复 (https://github.com/appcelerator/titanium_mobile

2022-05-07 02:58:04    分类:技术分享    android   webview   titanium   html5-video   appcelerator-mobile

chrome video src change not working

问题 视频结束后,我使用以下代码更改视频src属性。 我预加载了第二个视频,我将 src 更改为链接到第二个视频。 在IE和Firefox中,这工作得很好,但在 Chome 27.XX 中,视频元素在更改src后似乎死了。 奇怪的是......如果我使用断点来单步执行.ended函数中的代码,它就可以正常工作! HTML <video id="vid1" preload="auto" width="640" height="480" src="/Trans/video/sleigh60.mp4" controls> </video> <div style="display:none"> <video id="vid2" src="/Trans/video/sleighRest.mp4" preload="auto"> </video> </div> JavaScript <script type="text/javascript"> var vid2Source = '/Trans/video/sleighRest.mp4'; var video = document.getElementById('vid1'); video.addEventListener("ended", function() { video.src = vid2Source; video.load()

2022-05-06 03:27:03    分类:技术分享    javascript   html   google-chrome   html5-video

embed youtube html5 player shows no fullscreen button

问题 我在我的 php 文件中包含了 YouTube 播放器,但播放器没有显示全屏按钮。 切换到 Flash 播放器有效(无论是通过将 url 从 /embed 更改为 /v 还是禁用&html5=1 )。 我究竟做错了什么? 此处提供了一个示例:http://jonnyrimkus.square7.ch/stuff/youtube_html5_fullscreen.php <script> var tag = document.createElement(\'script\'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName(\'script\')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function onYouTubeIframeAPIReady() { player = new YT.Player(\'player\', { playerVars: { \'allowfullscreen\': \'true\', \'allowscriptaccess\': \'always\' }, events: { \'onReady\'

2022-05-05 18:51:04    分类:技术分享    html   youtube   html5-video   embed

Callback function for video.js?

问题 我正在使用 video.js 插件。 我正在使用 ajax 从另一个页面加载另一组视频,但我想再次调用 javascript 以再次执行蒙皮。 在我的 ajax 加载完 html 后,我可以使用回调函数吗? 具体来说,我在 video.js 制作的实际函数名称(如果有的话)之后。 即运行以修饰视频的javascript。 回答1 Ajax 有一个你可以使用的成功回调。 $.ajax({ type: "GET", url: url, success: function(data){ //Call back stuff } }); 您还可以使用错误和其他回调。 你可以在这里找到信息。 如果您无权访问 ajax 事件,您仍然可以绑定到成功回调。 这是有关如何执行此操作的文档。 回答2 我找到的最好的解决方案是here (function(){ var video = document.querySelector('video'); var onDurationChange = function(){ if(video.readyState){ //to your thing } }; video.addEventListener('durationchange', onDurationChange); onDurationChange(); })(); 试图做 videojs(

2022-05-05 17:39:04    分类:技术分享    javascript   jquery   video   html5-video