通過video實現視訊暫停時出現圖片
由於有video標籤,相容到ie9,ie9一下視訊無法正常播放,下面貼出程式碼
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<script src="jquery1-11.js"></script>
<style>
img{
position: absolute;
top:40px;
left:750px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var myVideo=document.getElementById("video1");
function eventTester(e){
myVideo.addEventListener(e,function(){
if(e=='pause'){
$('img').show();
}else{
$('img').hide();
}
});
}
eventTester("pause");
eventTester("play");
}
</script>
</head>
<body>
<div style="text-align:center;">
<br />
<video id="video1" width="420" style="margin-top:15px;" autoplay="autoplay" controls="controls" loop="loop">
<source src="http://d.liyi.in/incobook.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
</div>
<img src="1.jpg" alt="" width='420' height="206" style="display:block;z-index:9999" >
</body>
</html>
相關文章
- vue+樹莓派實現實時視訊播放暫停Vue樹莓派
- Video元件:控制視訊的播放與暫停IDE元件
- HTML CSS 實現滑鼠懸停時圖片拉近效果HTMLCSS
- 通過API介面實現圖片上傳API
- Nginx+FFmpeg實現rtsp流轉hls流,在WEB通過H5 video實現視訊播放NginxWebH5IDE
- web實戰:video結合canvas實現視訊線上截圖WebIDECanvas
- 短視訊直播原始碼,視訊計時效果,可隨時按鍵暫停原始碼
- 短視訊商城系統,通過Java實現圖片驗證碼,點選重新整理圖片驗證碼Java
- FFmpeg程式碼實現視訊轉jpg圖片
- iOS基於Socket.io即時通訊IM實現,WebRTC實現視訊通話iOSWeb
- video自定義實現視訊播放功能IDE
- js實現視訊截圖,視訊批量截圖,canvas實現JSCanvas
- C語言pause()函式:讓程式暫停直到訊號出現C語言函式
- 前端通過background實現圖片裁剪顯示的方法前端
- flutter實現B站播放器暫停時的header效果Flutter播放器Header
- Unity3D中暫停時的動畫及粒子效果實現Unity3D動畫
- WebRTC + WebSocket 實現視訊通話Web
- IM即時通訊專案講解(二) 自定義實現圖片選擇GalleryViewView
- 使用jQuery播放/暫停 HTML5視訊jQueryHTML
- C# 通過socket實現UDP 通訊C#UDP
- 使用Oracle實現實時通訊(轉)Oracle
- 【實戰】通過Python實現疫情地圖視覺化Python地圖視覺化
- 短視訊平臺開發,圖片上傳和圖片預覽功能實現
- 基於環信實現實時視訊語音通話功能
- 兩個視窗如何實現通訊
- video視訊標籤播放時js/jQuery顯示播放控制元件會導致播放暫停解決辦法IDEJSjQuery控制元件
- 通過 App Groups 實現程式間通訊APP
- ManualResetEvent實現執行緒的暫停與恢復執行緒
- 視訊直播原始碼,css實現圖片對角邊框線原始碼CSS
- 短視訊app原始碼,實現原生js圖片預覽效果APP原始碼JS
- 通過HTTP/2實現每天處理400GB圖片的實踐HTTP
- 【通過HTTP/2實現每天處理400GB圖片的實踐HTTP
- 3、Opencv播放視訊、儲存、暫停視訊,開啟攝像頭OpenCV
- 8┃音視訊直播系統之 WebRTC 信令系統實現以及通訊核心並實現視訊通話Web
- SpingBoot/JAVA實現給圖片加水印功能(通過thumbnailator庫)bootJavaAI
- 短視訊直播原始碼,動態釋出時選擇圖片、上傳圖片原始碼
- Uniapp 使用 GoEasy 實現 websocket 實時通訊APPGoWeb
- FileReader與URL.createObjectURL實現圖片、視訊上傳預覽Object