html5中文学习网

您的位置: 首页 > html5教程 > 滚动新闻 » 正文

html5视频应用

[ ] 已经帮助:人解决问题

今天发现一个不错的例 子,拿出来和大家分享一下呵呵7RFHTML5中文学习网 - HTML5先行者学习网

html5的应用简单试验7RFHTML5中文学习网 - HTML5先行者学习网
部分源代码:7RFHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html>7RFHTML5中文学习网 - HTML5先行者学习网
<html xmlns="http://www.w3.org/1999/xhtml"><head>7RFHTML5中文学习网 - HTML5先行者学习网
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">7RFHTML5中文学习网 - HTML5先行者学习网
                <title>HTML5 Video Voting - ZURB Playground - ZURB.com</title>7RFHTML5中文学习网 - HTML5先行者学习网
                                7RFHTML5中文学习网 - HTML5先行者学习网
                <meta name="description" content="Vote on your favorite videos with HTML5 video voting.">7RFHTML5中文学习网 - HTML5先行者学习网
                <meta name="keywords" content="HTML5 video, video voting, voting, HTML5, jQuery, plugin, ruby on rails, raphael.js , thought, idea, resources, concept, words, definition, zurbword, wiki, information, zurb, design strategy, inteaction design, UI">                7RFHTML5中文学习网 - HTML5先行者学习网
                <meta name="author" content=" ZURB, inc.">7RFHTML5中文学习网 - HTML5先行者学习网
                <meta name="copyright" content="ZURB, inc. Copyright (c) 2011">7RFHTML5中文学习网 - HTML5先行者学习网
                <link href="stylesheets/global.css" media="all" rel="stylesheet" type="text/css">7RFHTML5中文学习网 - HTML5先行者学习网
                <link href="stylesheets/application.css" media="all" rel="stylesheet" type="text/css">7RFHTML5中文学习网 - HTML5先行者学习网
                <link href="stylesheets/playground.css" media="all" rel="stylesheet" type="text/css">7RFHTML5中文学习网 - HTML5先行者学习网
                <link rel="icon" href="http://www.zurb.com/favicon.ico" type="image/x-icon">7RFHTML5中文学习网 - HTML5先行者学习网
                <style>7RFHTML5中文学习网 - HTML5先行者学习网
                #videoFeedbackPage{background:#1b0528 url(images/video-feedback/images/bg-repeat.jpg) top left repeat-x !important;}7RFHTML5中文学习网 - HTML5先行者学习网
                #header2 img{display:block;float:left;margin:25px 0 0;}7RFHTML5中文学习网 - HTML5先行者学习网
                #header2 h4 a{float:left;margin:20px 0 0 15px;padding:5px 0 1px 14px;font-weight:normal;border-left:1px solid rgba(255,255,255,.2) !important;color:#b7a5c2 !important;}7RFHTML5中文学习网 - HTML5先行者学习网
                #video-page{color:#eee;font-size:14px;padding-bottom:15px;}7RFHTML5中文学习网 - HTML5先行者学习网
                #video-page .column-row{padding-bottom:50px;}7RFHTML5中文学习网 - HTML5先行者学习网
                #video-page h3{color:#eee;font-size:22px;text-shadow:#111 2px 2px 1px;}7RFHTML5中文学习网 - HTML5先行者学习网
                #video-page p{line-height:1.5;}7RFHTML5中文学习网 - HTML5先行者学习网
                #video-page p span{background:#601f87;padding:3px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}7RFHTML5中文学习网 - HTML5先行者学习网
                #video-page a{font-weight:bold;text-decoration:none;color:#822bb6;}7RFHTML5中文学习网 - HTML5先行者学习网
                #video-page a:hover{color:#a535e8;}7RFHTML5中文学习网 - HTML5先行者学习网
                #header .super.white.button{opacity:0.4 !important;}7RFHTML5中文学习网 - HTML5先行者学习网
                #wrapper{border:none !important;background:transparent url(images/video-feedback/images/bg.jpg) top center no-repeat;}7RFHTML5中文学习网 - HTML5先行者学习网
                #videohead{padding-top:80px;padding-bottom:70px;}7RFHTML5中文学习网 - HTML5先行者学习网
                #videohead p.lead{position:relative;top:110px;font-size:22px;font-weight:300;text-shadow:#111 0px 4px 0px;color:#eee;text-align:center;}7RFHTML5中文学习网 - HTML5先行者学习网
                #ted{display:none;margin:0 auto;margin-top:150px;border:10px solid rgba(255,255,255,.2);}7RFHTML5中文学习网 - HTML5先行者学习网
                #earworm{margin:0 auto;margin-top:150px;border:10px solid rgba(255,255,255,.2);}7RFHTML5中文学习网 - HTML5先行者学习网
                #pta{display:none;margin:0 auto;margin-top:150px;border:10px solid rgba(255,255,255,.2);}7RFHTML5中文学习网 - HTML5先行者学习网
                #links{margin:0 auto;padding-top:20px;text-align:center;margin-bottom:60px;}7RFHTML5中文学习网 - HTML5先行者学习网
                #links .current{color:#eee;border-bottom:1px solid #eee;}7RFHTML5中文学习网 - HTML5先行者学习网
                #links a:hover{border-bottom:none;}7RFHTML5中文学习网 - HTML5先行者学习网
                #how{text-align:center;}7RFHTML5中文学习网 - HTML5先行者学习网
                #followUs,#getAJob{opacity:0.5 !important;}7RFHTML5中文学习网 - HTML5先行者学习网
                #followUs,#getAJob{opacity:0.8 !important;}7RFHTML5中文学习网 - HTML5先行者学习网
                .twitter-share-button{display:block;float:right;margin-top:23px;padding-right:20px;opacity:0.5;}7RFHTML5中文学习网 - HTML5先行者学习网
                .twitter-share-button:hover{opacity:0.8;}7RFHTML5中文学习网 - HTML5先行者学习网
                pre{white-space:pre-wrap;white-space:-moz-pre-wrap !important;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}7RFHTML5中文学习网 - HTML5先行者学习网
                </style>7RFHTML5中文学习网 - HTML5先行者学习网
        </head>7RFHTML5中文学习网 - HTML5先行者学习网
        7RFHTML5中文学习网 - HTML5先行者学习网
        <body id="videoFeedbackPage" class="chrome apple">7RFHTML5中文学习网 - HTML5先行者学习网
                <div id="wrapper">7RFHTML5中文学习网 - HTML5先行者学习网
                        <div id="container">7RFHTML5中文学习网 - HTML5先行者学习网
                                7RFHTML5中文学习网 - HTML5先行者学习网
                                <div id="content">7RFHTML5中文学习网 - HTML5先行者学习网
<div id="header2">7RFHTML5中文学习网 - HTML5先行者学习网
        <a class="super white button" id="followUs" href="http://www.twitter.com/zurb" name="followUs"><span>Follow us on Twitter</span></a> 7RFHTML5中文学习网 - HTML5先行者学习网
        <a class="super white button" id="getAJob" href="http://www.zurb.com/talent" name="getAJob"><span>Join Our Team</span></a>  7RFHTML5中文学习网 - HTML5先行者学习网
        <a href="http://www.zurb.com/" title="ZURB.com"><img alt="ZURB" src="http://www.zurb.com/playground/video-feedback/images/logo.png"></a>7RFHTML5中文学习网 - HTML5先行者学习网
        <h4><a href="http://www.zurb.com/playground">Playground</a></h4>7RFHTML5中文学习网 - HTML5先行者学习网
</div>7RFHTML5中文学习网 - HTML5先行者学习网
<div id="video-page">7RFHTML5中文学习网 - HTML5先行者学习网
        <div id="videohead">7RFHTML5中文学习网 - HTML5先行者学习网
                <p class="lead">Watch these fascinating videos and vote for your favorite parts<br> using the space bar.</p>7RFHTML5中文学习网 - HTML5先行者学习网
                <div id="ted" class="viewer" style="width: 600px; height: 380px; display: none; "><iframe frameborder="0" id="tedWindow" scrolling="no" style="width: 600px; height: 380px; z-index: 5; " src="iframes/ted.html"></iframe></div>7RFHTML5中文学习网 - HTML5先行者学习网
                <div id="earworm" class="viewer" style="width: 640px; height: 400px; display: block; border-top-color: rgba(255, 255, 255, 0.296875); border-right-color: rgba(255, 255, 255, 0.296875); border-bottom-color: rgba(255, 255, 255, 0.296875); border-left-color: rgba(255, 255, 255, 0.296875); "><iframe frameborder="0" id="earwormWindow" scrolling="no" style="width: 640px; height: 400px; z-index: 5; " src="iframes/earworm.html"></iframe></div>7RFHTML5中文学习网 - HTML5先行者学习网
                <div id="pta" class="viewer" style="width: 496px; height: 328px; border-top-color: rgba(255, 255, 255, 0.296875); border-right-color: rgba(255, 255, 255, 0.296875); border-bottom-color: rgba(255, 255, 255, 0.296875); border-left-color: rgba(255, 255, 255, 0.296875); display: none; "><iframe frameborder="0" id="ptaWindow" scrolling="no" style="width: 640px; height: 400px; z-index: 5; " src="iframes/pta.html"></iframe></div>7RFHTML5中文学习网 - HTML5先行者学习网
                <div id="links">7RFHTML5中文学习网 - HTML5先行者学习网
                        <a href="#earworn" class="earworm current">DJ Earworm Mashup 2011</a> |7RFHTML5中文学习网 - HTML5先行者学习网
                        <a href="#growyourhouse" class="ted">Grow Your House</a> |7RFHTML5中文学习网 - HTML5先行者学习网
                        <a href="#planestrainsandautomobiles" class="pta">Jugball Training Camp</a>7RFHTML5中文学习网 - HTML5先行者学习网
                </div>7RFHTML5中文学习网 - HTML5先行者学习网
                <div id="how">7RFHTML5中文学习网 - HTML5先行者学习网
                        <img src="images/video-feedback/images/how.gif">7RFHTML5中文学习网 - HTML5先行者学习网
                </div>7RFHTML5中文学习网 - HTML5先行者学习网
        </div>7RFHTML5中文学习网 - HTML5先行者学习网
        <div class="column-row">7RFHTML5中文学习网 - HTML5先行者学习网
                <div class="eight columns">7RFHTML5中文学习网 - HTML5先行者学习网
                        <h3>Voting &amp; Points of Interest</h3>7RFHTML5中文学习网 - HTML5先行者学习网
                        <p>Inspired by our user feedback tool, <a href="http://www.verifyapp.com" title="Verify">Verify</a>, we decided to develop a tool to allow you to gather feedback on your videos. Voting is exquisitely simple. All you do is click on the video and use the <span>spacebar</span> to submit your vote, it will automatically populate the bar graph above.</p>7RFHTML5中文学习网 - HTML5先行者学习网
                        <p>The video must be playing and have not ended for your vote to be accepted. You will know when you have successfully voted when the token <img src="images/video-feedback/images/marker.png"> is placed in the timeline.</p>7RFHTML5中文学习网 - HTML5先行者学习网
                        <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.</p>7RFHTML5中文学习网 - HTML5先行者学习网
                </div>7RFHTML5中文学习网 - HTML5先行者学习网
                <div class="eight columns">7RFHTML5中文学习网 - HTML5先行者学习网
                        <img src="images/video-feedback/images/html5-demo.jpg" style="width: 440px;height:292px">7RFHTML5中文学习网 - HTML5先行者学习网
                </div>7RFHTML5中文学习网 - HTML5先行者学习网
        </div>7RFHTML5中文学习网 - HTML5先行者学习网
        <div class="column-row">7RFHTML5中文学习网 - HTML5先行者学习网
                <div class="eight columns">7RFHTML5中文学习网 - HTML5先行者学习网
                        <br><br>7RFHTML5中文学习网 - HTML5先行者学习网
                        <div class="highlight" style="-webkit-border-radius: 3px;-moz-border-radius: 3px; border-radius: 3px;"><pre style="-moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #111; overflow: auto; color: #D0D0D0;; line-height: 125%"><span style="color: #6ab825; font-weight: normal">&lt;script </span><span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"javascripts/embed.js"</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;/script&gt;</span>7RFHTML5中文学习网 - HTML5先行者学习网
<span style="color: #6ab825; font-weight: normal">&lt;script&gt;</span>7RFHTML5中文学习网 - HTML5先行者学习网
        <span style="color: #d0d0d0">$(</span><span style="color: #ed9d13">'#ted'</span><span style="color: #d0d0d0">).poptastic({</span>7RFHTML5中文学习网 - HTML5先行者学习网
                <span style="color: #ed9d13">'video_id'</span> <span style="color: #d0d0d0">:</span> <span style="color: #3677a9">12</span><span style="color: #d0d0d0">,</span>7RFHTML5中文学习网 - HTML5先行者学习网
                <span style="color: #ed9d13">'autoplay'</span> <span style="color: #d0d0d0">:</span> <span style="color: #6ab825; font-weight: normal">true</span><span style="color: #d0d0d0">,</span>7RFHTML5中文学习网 - HTML5先行者学习网
                <span style="color: #ed9d13">'width'</span>    <span style="color: #d0d0d0">:</span> <span style="color: #3677a9">600</span><span style="color: #d0d0d0">,</span>7RFHTML5中文学习网 - HTML5先行者学习网
                <span style="color: #ed9d13">'height'</span>   <span style="color: #d0d0d0">:</span> <span style="color: #3677a9">340</span>7RFHTML5中文学习网 - HTML5先行者学习网
        <span style="color: #d0d0d0">});</span>7RFHTML5中文学习网 - HTML5先行者学习网
<span style="color: #6ab825; font-weight: normal">&lt;/script&gt;</span></pre></div>7RFHTML5中文学习网 - HTML5先行者学习网
                        </div>7RFHTML5中文学习网 - HTML5先行者学习网
                <div class="eight columns">7RFHTML5中文学习网 - HTML5先行者学习网
                        <h3>Behind the Scenes</h3>7RFHTML5中文学习网 - HTML5先行者学习网
                        <p>HTML5 Video Voting relies on <a href="http://jquery.com" title="jQuery" rel="nofollow">jQuery</a>, and <a href="http://raphaeljs.com/" title="Raphael.js" rel="nofollow">Raphael.js</a> to make the magic happen. We've developed a small jQuery plugin for quickly embedding the "viewer" into any page.</p>7RFHTML5中文学习网 - HTML5先行者学习网
                        <p>We are using the <a href="https://developer.mozilla.org/en/DOM/window.postMessage" title="PostMessage">postmessage</a> method for safely communicating with the video that is embedded in a cross-domain iframe.</p>7RFHTML5中文学习网 - HTML5先行者学习网
                        <p>The player is tested in FireFox 4+, Chrome 10+, and Safari 4+ but may very well work in others.</p>7RFHTML5中文学习网 - HTML5先行者学习网
                </div>7RFHTML5中文学习网 - HTML5先行者学习网
        </div>7RFHTML5中文学习网 - HTML5先行者学习网
</div>7RFHTML5中文学习网 - HTML5先行者学习网
7RFHTML5中文学习网 - HTML5先行者学习网
<script src="javascripts/jquery.js"></script>7RFHTML5中文学习网 - HTML5先行者学习网
<script src="javascripts/embed.js"></script>7RFHTML5中文学习网 - HTML5先行者学习网
<script>7RFHTML5中文学习网 - HTML5先行者学习网
        $('#ted').poptastic({7RFHTML5中文学习网 - HTML5先行者学习网
                'video_id' : 2,7RFHTML5中文学习网 - HTML5先行者学习网
                'autoplay' : false,7RFHTML5中文学习网 - HTML5先行者学习网
                'width'    : 600,7RFHTML5中文学习网 - HTML5先行者学习网
                'height'   : 3407RFHTML5中文学习网 - HTML5先行者学习网
        });7RFHTML5中文学习网 - HTML5先行者学习网
        $('#earworm').poptastic({7RFHTML5中文学习网 - HTML5先行者学习网
                'video_id' : 1,7RFHTML5中文学习网 - HTML5先行者学习网
                'autoplay' : false,7RFHTML5中文学习网 - HTML5先行者学习网
                'width'    : 640,7RFHTML5中文学习网 - HTML5先行者学习网
                'height'   : 3607RFHTML5中文学习网 - HTML5先行者学习网
        });7RFHTML5中文学习网 - HTML5先行者学习网
        $('#pta').poptastic({7RFHTML5中文学习网 - HTML5先行者学习网
                'video_id' : 3,7RFHTML5中文学习网 - HTML5先行者学习网
                'autoplay' : false,7RFHTML5中文学习网 - HTML5先行者学习网
                'width'    : 640,7RFHTML5中文学习网 - HTML5先行者学习网
                'height'   : 3607RFHTML5中文学习网 - HTML5先行者学习网
        });7RFHTML5中文学习网 - HTML5先行者学习网
        $('#links a').click(function (e) {7RFHTML5中文学习网 - HTML5先行者学习网
                e.preventDefault;7RFHTML5中文学习网 - HTML5先行者学习网
                $('.viewer').hide();7RFHTML5中文学习网 - HTML5先行者学习网
                var selected = $(this).attr('class');7RFHTML5中文学习网 - HTML5先行者学习网
                $('#links a').removeClass('current');7RFHTML5中文学习网 - HTML5先行者学习网
                $('#' + selected).show();7RFHTML5中文学习网 - HTML5先行者学习网
                $(this).addClass('current');7RFHTML5中文学习网 - HTML5先行者学习网
        });7RFHTML5中文学习网 - HTML5先行者学习网
</script>7RFHTML5中文学习网 - HTML5先行者学习网
                                </div>7RFHTML5中文学习网 - HTML5先行者学习网
                        </div>7RFHTML5中文学习网 - HTML5先行者学习网
                </div>7RFHTML5中文学习网 - HTML5先行者学习网
                        7RFHTML5中文学习网 - HTML5先行者学习网
                <div id="siteInfo" style="display:none">7RFHTML5中文学习网 - HTML5先行者学习网
                        <div class="container">7RFHTML5中文学习网 - HTML5先行者学习网
                                <div class="column-row">7RFHTML5中文学习网 - HTML5先行者学习网
                                        <div class="six columns" id="aboutPlayground">7RFHTML5中文学习网 - HTML5先行者学习网
                                                <h4>Creative Experiments from <strong>ZURB.</strong></h4>7RFHTML5中文学习网 - HTML5先行者学习网
                                                <p>Welcome to the <a href="http://www.zurb.com/playground">ZURB Playground</a>, creative interaction design tools and experiments by the design and engineering teams here at ZURB. We create tools, implementation examples, and other interesting projects that help people design for people.</p>7RFHTML5中文学习网 - HTML5先行者学习网
                                        </div>7RFHTML5中文学习网 - HTML5先行者学习网
                        7RFHTML5中文学习网 - HTML5先行者学习网
                                        <div class="five columns" id="zurbword">7RFHTML5中文学习网 - HTML5先行者学习网
                                                <h5>More From the Playground</h5>7RFHTML5中文学习网 - HTML5先行者学习网
                                                <ul>7RFHTML5中文学习网 - HTML5先行者学习网
                                                        <li><a href="http://www.zurb.com/playground">Playground Home</a></li>7RFHTML5中文学习网 - HTML5先行者学习网
                                                        <li><a href="http://www.smashingmagazine.com/author/dmitry-dragilev/" rel="nofollow">Our Articles on Smashing Magazine</a></li>7RFHTML5中文学习网 - HTML5先行者学习网
                                                        <li><a href="http://www.zurb.com/blog/topic/implementation">Implementation Articles on the ZURBlog</a></li>7RFHTML5中文学习网 - HTML5先行者学习网
                                                </ul>7RFHTML5中文学习网 - HTML5先行者学习网
                                        </div>7RFHTML5中文学习网 - HTML5先行者学习网
                        7RFHTML5中文学习网 - HTML5先行者学习网
                                        <div class="five columns" id="zurbnews">7RFHTML5中文学习网 - HTML5先行者学习网
                                                        <h5>Subscribe to ZURBnews</h5>7RFHTML5中文学习网 - HTML5先行者学习网
        <form action="http://www.zurb.com/newsletter/sign_up" id="newsSubscribe" method="post">7RFHTML5中文学习网 - HTML5先行者学习网
                <div class="wrapper">7RFHTML5中文学习网 - HTML5先行者学习网
                        <input class="input-text" id="groupie_email" name="groupie[email]" size="21" type="text" value="Enter your e-mail...">7RFHTML5中文学习网 - HTML5先行者学习网
                        <button class="playground" type="submit">Get It</button>7RFHTML5中文学习网 - HTML5先行者学习网
                </div>7RFHTML5中文学习网 - HTML5先行者学习网
                7RFHTML5中文学习网 - HTML5先行者学习网
        </form>7RFHTML5中文学习网 - HTML5先行者学习网
        <p>Get our monthly newsletter, ZURBnews.<br> Check out the <a href="http://www.zurb.com/news" title="Read last month's edition of ZURBnews">latest news and buzz »</a></p>7RFHTML5中文学习网 - HTML5先行者学习网
                                        </div>7RFHTML5中文学习网 - HTML5先行者学习网
                                </div>7RFHTML5中文学习网 - HTML5先行者学习网
                        7RFHTML5中文学习网 - HTML5先行者学习网
                                <div id="footer">7RFHTML5中文学习网 - HTML5先行者学习网
        <ul>7RFHTML5中文学习网 - HTML5先行者学习网
                <li><a href="http://www.zurb.com/" class="home" title="ZURB.com">Home</a></li>7RFHTML5中文学习网 - HTML5先行者学习网
                <li><a href="http://www.zurb.com/talent" class="talent" title="Talent">Talent</a></li>7RFHTML5中文学习网 - HTML5先行者学习网
                <li><a href="http://www.zurb.com/work" class="work" title="Our Work">Work</a></li>7RFHTML5中文学习网 - HTML5先行者学习网
                <li><a href="http://www.zurb.com/blog" class="blog" title="The ZURBlog">Blog</a></li>7RFHTML5中文学习网 - HTML5先行者学习网
                <li><a href="http://www.zurb.com/playground" class="playground" title="The Playground">Playground</a></li>7RFHTML5中文学习网 - HTML5先行者学习网
                <li><a href="http://www.zurb.com/contact" class="contact" title="Contact Us">Contact</a></li>7RFHTML5中文学习网 - HTML5先行者学习网
                <li class="rss"><a href="http://feeds.feedburner.com/zurb/blog" title="Follow our blog via RSS">Subscribe to Our Blog</a></li>7RFHTML5中文学习网 - HTML5先行者学习网
        </ul>7RFHTML5中文学习网 - HTML5先行者学习网
7RFHTML5中文学习网 - HTML5先行者学习网
        <p class="copyright">© 1998 - 2011 ZURB. All rights reserved.</p>7RFHTML5中文学习网 - HTML5先行者学习网
</div>7RFHTML5中文学习网 - HTML5先行者学习网
7RFHTML5中文学习网 - HTML5先行者学习网
                        </div>7RFHTML5中文学习网 - HTML5先行者学习网
                </div></body></html>7RFHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助