html5-video | 易学教程

Accessing HTML 5 Video Progress Event with jQuery

阅读更多关于 Accessing HTML 5 Video Progress Event with jQuery

问题 The below is for an HTML5 video player event. My partner and I have been stumped for a very large portion of the day on this issue and hope someone can lend some insight on the issue. We have been able to access the progress event with plain js as seen below but when trying to access this with jQuery we get undefined in console. Any help/ recommendations are greatly appreciated. //JS - Works like a charm document.addEventListener("DOMContentLoaded", init, false); function init() { var v =

Checking if a html5 video is ready

阅读更多关于 Checking if a html5 video is ready

is there an JavaScript event triggered, if a HTML5 video is ready for playback? I assume that ready for playback means that the readyState property is equal to HAVE_ENOUGH_DATA constant (numeric value 4). According to the doc , when the readyState property turn to this value, a canplay event should be fired. Just came across this question and although it is a little old I am posting this for future readers (who; like me, probably come from Google). So as of today this is the event list for html5 media (according to W3C): onabort : Script to be run on abort oncanplay : Script to be run when a

Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width

阅读更多关于 Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width

I am using the following CSS to display a video in full width (100%) on a responsive HTML5 page. The native size of the video is 480x270. The video is scaled to fill the full width of the page on all desktop browsers while maintaining the aspect ratio. However, Mobile Safari and Chrome on my iPad (iOS 6.0.1) shows a black rectangle with the same width as the page. The video is tiny and displayed in its native size (480x270) at the center of the black rectangle. video { width: 100%; max-width: 100%; height: auto; } inspired by http://webdesignerwall.com/tutorials/css-elastic-videos . There's a

What h.264 format loads on android AND IOS?

阅读更多关于 What h.264 format loads on android AND IOS?

Theoretically both IOS and ANDROID will play h.264 files, but I can't figure out a setting to encode them so they actually work cross platform. Does anybody know how to encode for both Android and IOS using one file? p.s. I know all about html5 video and the fallback sources, I just don't want to encode and host a new video for every device that comes down the pike. Here's the ffmpeg command line we use to transcode to MPEG-4 h.264 in our production environment. We've tested the output on several Android devices, as well as iOS. You can use this as a starting point, just tweaking things like

Stream getUserMedia to an Icecast server?

阅读更多关于 Stream getUserMedia to an Icecast server?

问题 Is there a way to stream the local blob created by webrtc's getUserMedia (vidio and audio) to an Icecast server, making it possible to live broadcast using HTML5? Specifically in the following example (from Justin Uberti's 2012 Google I/O video) I can capture audio/video and play it locally in a video element: <script type="text/javascript"> var onGotStream = function(stream) { var url = webkitURL.createObjectURL(stream); video.src = url; // } navigator.webkitGetUserMedia({video: true, audio:

No video with supported format and MIME type found

阅读更多关于 No video with supported format and MIME type found

问题 I have the next code in my index for a video: <video width="100%" controls> <source src="video/v1.ogv" type="video/ogg"> <source src="video/v1.webm" type="video/webm"> <source src="video/v1.mp4" type="video/mp4"> Your browser does not support the video tag. </video> When i try to load it in firefox it will return "No video with supported format and MIME type found." Firebug will return "NetworkError: 500 Internal Server Error - https://root/folder/video/v1.ogv" v1.ogv HTTP load failed with

HTML5 exiting video fullscreen

阅读更多关于 HTML5 exiting video fullscreen

问题 I have a HTML5 video with custom controls in normal screen. Don't have custom controls at full screen. I just show default controls at full screen. But when exiting full screen I need to disable default controls. How do we know whether the video has exited the full screen mode using JavaScript or jQuery? 回答1: You can only call document.mozCancelFullScreen() , if you’re inside a document which is fullscreen . i.e. if you’re in an which is a contained inside another document, which is

Redirect html5 video after play

阅读更多关于 Redirect html5 video after play

I have an html 5 video which i remove the control buttons and added a js code in order for the user to play the video when the video is clicked. What I need to do is to bind an additional script that will redirect the page after the video plays without a page reload. Below is my js code. function play(){ var video = document.getElementById('video'); video.addEventListener('click',function(){ video.play(); },false); } And Here is my HTML5 Video Code <video id="video" width="770" height="882" onclick="play();"> <source src="video/Motion.mp4" type="video/mp4" /> </video> <script src="text

Does iPhone/iPad Safari require 'Accept-Ranges' header for video?

阅读更多关于 Does iPhone/iPad Safari require 'Accept-Ranges' header for video?

I've been having problems serving videos from my dev server that play in mobile Safari. My dev server does not support the 'Accept-Ranges' header and after reading a few forums I've discovered that may be my problem. Here is an example forum posting saying just that. Is this correct? Does mobile Safari require the Accept-Ranges header? Can anyone point me to any Apple documentation actually stating that? Thanks. Chuck Phillips I found some Apple documentation that says that it does in fact need that for video. HTTP servers hosting media files for iOS must support byte-range requests, which iOS

HTML5 video error handling

阅读更多关于 HTML5 video error handling

问题 I need to tell, whether video cannot be played ("x" sign is shown in browser). This code does't works. "onerror" event will never be fired under Firefox var v = document.getElementsByTagName("video")[0]; if ( v != undefined ) v.onerror = function(e) { if ( v.networkState == v.NETWORK_NO_SOURCE ) { // handle error } } What's wrong here ? 回答1: "onerror" is not a valid event type for <video> Use "error" instead. document.getElementsByTagName('video')[0].addEventListener('error', function(event)