Created
October 11, 2014 06:51
-
-
Save precious-ming/e656af066e82ebc9702e to your computer and use it in GitHub Desktop.
HTML5-video
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div id="videoPlayer" style="text-align:center;"> | |
| <video height="210" controls poster="http://www.sinaimg.cn/dy/slidenews/1_img/2014_40/43011_490985_109173.jpg"> | |
| <source src="http://vod.lawtv.net.cn/996/996_1395636746351_20140318fs001.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source> | |
| </video> | |
| <p> | |
| <button class="btn" value="http://vod.lawtv.net.cn/996/996_1395636746351_20140318fs001.mp4" >视频1-MP4</button> | |
| <button class="btn" value="http://vd.lawtv.com.cn/50/42/1409443863861_3844.mp4" >视频2-MP4</button> | |
| </p> | |
| </div> | |
| <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> | |
| <script type="text/templete" id="videoTemplete"> | |
| <video width="352" height="264" autoplay controls poster="http://www.sinaimg.cn/dy/slidenews/1_img/2014_40/43011_490985_109173.jpg"> | |
| <source src="" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source> | |
| </video> | |
| <p> | |
| <button class="btn" value="http://vod.lawtv.net.cn/996/996_1395636746351_20140318fs001.mp4" >视频1-MP4</button> | |
| <button class="btn" value="http://vd.lawtv.com.cn/50/42/1409443863861_3844.mp4" >视频2-MP4</button> | |
| </p> | |
| </script> | |
| <script type="text/javascript"> | |
| (function(){ | |
| $(document).on("click",".btn",function(){ | |
| var videoUrl = $(this).attr("value"); | |
| var playerHtml = $("#videoPlayer").html(); | |
| $("#videoPlayer").html(""); | |
| $("#videoPlayer").html($("#videoTemplete").html()); | |
| $("#videoPlayer").children().first().children().first().attr("src",videoUrl); | |
| }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
确实很方便
http://www.w3school.com.cn/tags/tag_video.asp
视频资源：
http://www.jikexueyuan.com/event/html5.html