最好免费的 HTML5 & JS 网站视频播放器
jopen 12年前
<h3>1) Sublime Video – A HTML 5 Video Player</h3> <p><a title="Sublime Video" href="/misc/goto?guid=4958342039002499365" target="_blank">Sublime Video</a> is a <strong>HTML5 Video Player, users can play videos without the need of browser plugins or Flash dependencies</strong>. It supports Full-window mode with sleek zoom-in/out transitions. There are more advanced controls on a draggable pane. Sublime Video will be soon released for free (at least for non-commercial use).</p> <p style="text-align:center;"><a title="Sublime Video" href="/misc/goto?guid=4958342039002499365" target="_blank"><img class="size-full wp-image-2385 aligncenter" title="html5-video" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/2c42f6343fabe047e6af0e7b88baceb2.jpg" width="480" height="272" /></a></p> <blockquote> <p>Requirements: Safari 4.0.4+, Google Chrome 4.0+, IE with Chrome Frame<br /> Demo: <a title="demo" href="/misc/goto?guid=4958342039002499365" rel="nofollow" target="_blank">http://jilion.com/sublime/video</a><br /> License: License Free</p> </blockquote> <h3>2) VideoJS – HTML5 Video Player with Pure CSS Skins</h3> <p><a title="VideoJS" href="/misc/goto?guid=4958188553188950575" target="_blank">VideoJS</a> is an HTML5 Video Player with 3 core parts: An embed code (Video for Everybody), a Javascript library (video.js), and a pure HTML/CSS skin (video-js.css). Using Video for Everybody as the embed code means you know it’s compatible with many devices (including ones without javascript).</p> <p>The javascript library fixes browser & device bugs, and makes sure your video is even more compatible across different browser versions. The pure HTML5/CSS skin ensures a consistent look between HTML5 browsers, and easy custom skinning if you want to give it a specific look, or brand it with your own colors.</p> <p style="text-align:center;"><a title="VideoJS" href="/misc/goto?guid=4958188553188950575" target="_blank"><img class="size-full wp-image-4068 aligncenter" title="video-js" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/55d2250215e596afa8adc103dc7875a5.jpg" width="480" height="197" /></a></p> <blockquote> <p>Requirements: HTML5<br /> Demo: <a title="demo" href="/misc/goto?guid=4958188553188950575" rel="nofollow" target="_blank">http://videojs.com/</a><br /> License: LGPL License</p> </blockquote> <h3>3) Subtitle & Caption Your Videos Easily with Viewers</h3> <p>The lack of captions and subtitles on video is a major obstacle for people with hearing disabilities and a huge language barrier for the whole world. <a title="Universal Subtitles" href="/misc/goto?guid=4958342043475471838" target="_blank">Universal Subtitles</a> want to give individuals and communities the power to overcome these barriers. The tools they are building are free and open source and will make the work of subtitling and translating video simpler, more appealing, and, most of all, more collaborative.</p> <p><a title="Universal Subtitles" href="/misc/goto?guid=4958342043475471838" target="_blank"><strong>Universal Subtitles</strong></a><strong> make it easy for anyone to add subtitles, captions, or translate nearly any video on the web</strong>. You add their widget to your videos. Then you and your viewers can add subtitles, which anyone can watch.</p> <p style="text-align:center;"><a title="Universal Subtitles" href="/misc/goto?guid=4958342043475471838" target="_blank"><img class="size-full wp-image-3767 aligncenter" title="video-subtitles" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/6ec58d4938af0f929f5631681b928046.jpg" width="479" height="263" /></a></p> <blockquote> <p>Requirements: -<br /> Demo: <a title="demo" href="/misc/goto?guid=4958342043475471838" rel="nofollow" target="_blank">http://universalsubtitles.org/</a><br /> License: AGPL License</p> </blockquote> <h3>4) FlowPlayer Open Source Flash Video Player for Web</h3> <p><a title="Flowplayer Open Source Flash Video Player" href="/misc/goto?guid=4958318127223767346" target="_blank">FlowPlayer</a> is a Flash media player. You can use it on your HTML pages to play video files. “It is your personal 油Tube”. It is highly customizable which upports all the features you’ll possibly need and these features can be configured the way you like. Look and feel is important to us. FlowPlayer’s skin is flexible and will smoothly melt into your site. Progressive downloading, solid streming, long play features, playlists, fullscreen mode and etc… Everything you’ll need to provide rich user experience. <a title="Flowplayer Open Source Flash Video Player" href="/misc/goto?guid=4958318127223767346" target="_blank">Flowplayer</a> is licenced under the GPL license so it’s free too.</p> <p style="text-align:center;"><a title="Flowplayer Open Source Flash Video Player" href="/misc/goto?guid=4958318127223767346" target="_blank"><img alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/d83f65a47f03dbb6faedcfd03558eb2b.png" width="480" height="267" /></a></p> <blockquote> <p>Requirements: Flash 9<br /> Demo: <a title="demo" href="/misc/goto?guid=4958318127223767346" target="_blank">http://flowplayer.org/</a><br /> License: GPL License</p> </blockquote> <h3>5) Fluid Width Videos Embeds for Responsive Web Design</h3> <p><a title="fitvidjs" href="/misc/goto?guid=4958197524504456217" target="_blank">FitVids.js</a> is a <strong>lightweight, easy-to-use jQuery plugin for fluid width video embeds</strong>. FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.</p> <p>Have a custom video player? They have a customSelector option where you can add your own specific video vendor selector too. FitVids.js is released under the WTFPL license.</p> <p style="text-align:center;"><a title="fitvidjs" href="/misc/goto?guid=4958197524504456217" target="_blank"><img class="size-full wp-image-5025 aligncenter" title="responsive-video" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/de15fc6f597d2a1ab8757049845d7c5f.png" width="480" height="270" /></a></p> <blockquote> <p>Requirements: jQuery Framework<br /> Demo: <a title="demo" href="/misc/goto?guid=4958197524504456217" rel="nofollow" target="_blank">http://fitvidsjs.com/</a><br /> License: WTFPL License</p> </blockquote> <h3>6) HTML5 Video Voting & Populate Bar Graph in Timeline</h3> <p><a title="HTML5 Video Voting" href="/misc/goto?guid=4958342051587060472" target="_blank">HTML5 Video Voting</a> allows you to gather feedback on your videos. Voting is exquisitely simple. All you do is click on the video and use the spacebar to submit your vote, it will automatically populate the bar graph.</p> <p>When you vote, it is added to that section of the videos timeline. This allows a viewer to quickly assess the most intriguing segments of the video and quickly jump to those sections by clicking on the bar graph. The player is tested in FireFox 4+, Chrome 10+, and Safari 4+ but may very well work in others.</p> <p style="text-align:center;"><a title="HTML5 Video Voting" href="/misc/goto?guid=4958342051587060472" target="_blank"><img class="size-full wp-image-4756 aligncenter" title="html5-video-voting" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/8a8eedf1104030c9334d3e1dfea5e173.png" width="480" height="300" /></a></p> <blockquote> <p>Requirements: jQuery Framework<br /> Demo: <a title="demo" href="/misc/goto?guid=4958342051587060472" rel="nofollow" target="_blank">http://www.zurb.com/playground/html5-video-voting</a><br /> License: MPL License</p> </blockquote> <h3>7) An Event System for HTML5 Media Developers</h3> <p><a title="Popcorn.js" href="/misc/goto?guid=4958342053856666313" target="_blank">Popcorn.js</a> is an<strong> event system for HTML5 media developers</strong>. Think jQuery for video. You can leave the heavy lifting to Popcorn, and concentrate on what you do best: writing awesome code.</p> <p><a title="Popcorn.js" href="/misc/goto?guid=4958342053856666313" target="_blank">Popcorn.js</a> utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API, and provides a plugin system for community contributed interactions. Popcorn has dozens of plugins for common services and APIs, ranging from 推ter, to Maps, to media events, and more. But if it doesn’t do what you need right now, you can write your own plugins quickly and easily.</p> <p style="text-align:center;"><a title="Popcorn.js" href="/misc/goto?guid=4958342053856666313" target="_blank"><img class="size-full wp-image-5244 aligncenter" title="popcorn" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/608ea823a93ba92a6e7d9c439ea98792.png" width="480" height="250" /></a></p> <blockquote> <p>Requirements: -<br /> Demo: <a title="demo" href="/misc/goto?guid=4958342053856666313" rel="nofollow" target="_blank">http://mozillapopcorn.org/popcornjs/</a><br /> License: MIT License</p> </blockquote> <h3>8) ToobPlayer – Lightweight FLV 油Tube Video Player</h3> <p><a title="ToobPlayer - FLV 油Tube Video Player" href="/misc/goto?guid=4958342056855724366" target="_blank">ToobPlayer</a> is a lightweight FLV player component that comes in five flavors, provides a mechanism to play back 油Tube videos, and can also display preview images. Nowadays, 油Tube is more popular than you can imagine. A lot of people upload their videos on 油Tube. It would be very useful when you would like to embed some 油Tube videos on your site.</p> <p>ToobPlayer is resizable with full-screen mode. It allows several video resize modes. It gives you loading status feedback. It supports mouse-wheel (Seeking/Volumn Control). And you can customize ToobPlayer easily as well.</p> <p style="text-align:center;"><a title="ToobPlayer - FLV 油Tube Video Player" href="/misc/goto?guid=4958342056855724366" target="_blank"><img title="油Tube-player" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/b8eda9f4e22900dc8c84b84859439eb3.png" width="480" height="225" /></a></p> <blockquote> <p>Requirements: Adobe Extension Manager<br /> Demo: <a title="Demo" href="/misc/goto?guid=4958342056855724366" target="_blank">http://emehmedovic.com/xmca/toobplayer/</a><br /> License: MIT License</p> </blockquote> <h3>9) Set 油Tube Video as Background with Tubular jQuery Plugin</h3> <p><a title="Tubular" href="/misc/goto?guid=4958342059116487597" target="_blank">Tubular</a> is a jQuery plugin that <strong>lets you set a 油Tube video as your page background</strong>. Usage is straightforward and requires JavaScript and the Flash player to be installed and functional on the client’s browser. tubular is dependent on jQuery and swfobject.</p> <p>Just attach it to your body tag, specify a 油Tube video ID and tell it the ID of your content wrapper, and you’re on your way. Please note, tubular must be deployed on a web server to function. The 油Tube player will not work when loaded into your browser from your machine.</p> <p style="text-align:center;"><a title="Tubular" href="/misc/goto?guid=4958342059116487597" target="_blank"><img class="size-full wp-image-5536 aligncenter" title="油Tube-background" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/26fd4a49e5338d3f3ce5f0d9e53e3140.png" width="479" height="320" /></a></p> <blockquote> <p>Requirements: jQuery and Flash<br /> Demo: <a title="demo" href="/misc/goto?guid=4958342059116487597" rel="nofollow" target="_blank">http://code.google.com/p/jquery-tubular/</a><br /> License: MIT License</p> </blockquote> <h3>10) Open Source Media Player in jQuery & HTML5</h3> <p>The mediafront platform is an open source (GPLv3) front end media solution for the web. Through its integration with popular content management systems, it employs an innovative and intuitive interface that allows any website administrator to completely customize the front end media experience for their users without writing any code.</p> <p>In addition to this amazing module included is the <a title="Open Standard Media Player" href="/misc/goto?guid=4958201405201423815" target="_blank">OSM (Open Standard Media Player) Player</a>. This media player is open source (GPL) media player that is built to dynamically deliver any type of web media, including HTML5, 油Tube, Vimeo, and Flash.</p> <p style="text-align:center;"><a title="Open Standard Media Player" href="/misc/goto?guid=4958201405201423815" target="_blank"><img class="size-full wp-image-2841 aligncenter" title="open-video-player" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/b789ca517fbc6ef30754dfd8ee6de52e.jpg" width="480" height="321" /></a></p> <blockquote> <p>Requirements: jQuery Framework<br /> Demo: <a title="demo" href="/misc/goto?guid=4958201405201423815" rel="nofollow" target="_blank">http://www.mediafront.org/project/osmplayer</a><br /> License: MIT License</p> </blockquote> <h3>11) How to Build a Custom HTML5 Video Player with jQuery</h3> <p>As professional web designers, we want to create a video player that looks consistent across browsers. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari. If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch. This is not as hard as it seems.</p> <p>All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.</p> <p>Article: <a title="Building a Custom HTML5 Video Player" href="/misc/goto?guid=4958330781631158520" target="_blank">Building a custom HTML5 video player with CSS3 and jQuery</a> taught us how to build an easily customizable HTML5 <video> player, including packaging it as a simple jQuery plugin, choosing control types and outputting custom CSS for your own situation. </video></p> <p style="text-align:center;"><a title="Building a Custom HTML5 Video Player" href="/misc/goto?guid=4958330781631158520" target="_blank"><img class="size-full wp-image-3309 aligncenter" title="html5-video-player" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/61c9fd5683021a944455466dd97f63c5.jpg" width="480" height="214" /></a></p> <blockquote> <p>Source: <a title="Building a Custom HTML5 Video Player" href="/misc/goto?guid=4958330781631158520" target="_blank">Building a custom HTML5 video player with CSS3 and jQuery</a></p> </blockquote> <h3>12) The jQuery HTML5 Audio / Video Library</h3> <p><a title="jPlayer" href="/misc/goto?guid=4958342065792099247" target="_blank">jPlayer</a> is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to<strong> rapidly weave cross platform audio and video into your web pages</strong>. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.</p> <p>It is easy to get started and deploy in minutes. It’s totally customizable and skinnable using HTML and CSS. It has been tested on Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9.</p> <p style="text-align:center;"><a title="jPlayer" href="/misc/goto?guid=4958342065792099247" target="_blank"><img class="size-full wp-image-5672 aligncenter" title="jplayer" alt="最好免费的 HTML5 & JS 网站视频播放器" src="https://simg.open-open.com/show/8a809bf83ad1632f7a34631eddf698a6.png" width="480" height="334" /></a></p> <blockquote> <p>Requirements: jQuery Framework<br /> Demo: <a title="demo" href="/misc/goto?guid=4958342065792099247" rel="nofollow" target="_blank">http://www.jplayer.org/</a><br /> License: MIT License</p> </blockquote>