html5播放視頻且動態截圖實現步驟與代碼(支持safari其他未測試)_HTML5教程
推薦：html5指南-7.geolocation結合google maps開發一個小的應用今天我們將把html5的geolocation結合google maps開發一個小的應用,感興趣的朋友可以了解下，如有不足，愿大俠給予指教
暫不支持chrom 。支持safari .其他未測試先引用 jquery 地址。選用新浪的
復制代碼 代碼如下:www.zhaotila.cn
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.6/jquery.js"></script>
加一個video標簽
復制代碼 代碼如下:www.zhaotila.cn
<video id="video" controls="controls">
<source src="1.mp4" />
</video>
然后js
復制代碼 代碼如下:www.zhaotila.cn
<script type="text/javascript">
$().ready(function(){
var video, output;
var scale = 0.25;
var initialize = function() {
output = $("#output");
video = $("#video").get(0);
$("#capture").click(captureImage);
};
var captureImage = function() {
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d')
.drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL();
output.prepend(img);
};
$(initialize);
});
</script>
效果圖就不貼了。
分享：使用html5+css3來實現slider切換效果告別javascript+css提到slider，過去一直都是用css+js來配合實現相關的切換效果。聽過大家一直討論使用html5+css3的實現方式，自己卻一直沒有動手實現過。好吧，這次我有時間來玩下css3了,感興趣的朋友可以了解下哦
相關HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發的過程介紹
- HTML5 對各個標簽的定義與規定：body的介紹
- 關于HTML5的安全問題開發人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數據庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
- 相關鏈接：
- 教程說明：
HTML5教程-html5播放視頻且動態截圖實現步驟與代碼(支持safari其他未測試)
。