前端两种播放视频的方式
生活随笔
收集整理的這篇文章主要介紹了
前端两种播放视频的方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
兩種方式，需要彈窗的話，可以結合layer使用
<html><head><script src="vue.js"></script><style type="text/css">video{width: auto;max-height: 100%}</style></head><body><!--第一種 引入視頻鏈接 --><div id="app" style="width: 500px;height: 400px" align="center"><video controls><source src="http://oss2.lanlanlife.com/2%E9%82%80%E8%AF%B7%E5%A5%BD%E5%8F%8B.mp4" type="video/mp4"></source></video></div><!--第二種 嵌入iframe 播放外部視頻 --><div style="width: 500px;height: 400px" align="center"><iframe height=498 width=510 src='http://player.youku.com/embed/XNDExMDIyMDg5Ng==' frameborder=0 'allowfullscreen'></iframe></div><script></script></body> </html>視頻操作（很有意思）：
<videoid="videoSrc"preload="metadata":src="/"muted @mousedown.stop='mouseDown($event)'@mouseup.stop='mouseMove'@touchstart.stop='touchDown($event)'@touchend.stop='touchMove($event)' /> this.videoObj = document.getElementById('videoSrc') beforeRouteEnter(to, from, next) {next(vm=> {vm.$nextTick(()=>{let videoObj=vm.videoObj;videoObj.currentTime = 0;videoObj.play()videoObj.pause()video.addEventListener('timeupdate',()=> {videoObj.currentTime = 10.5;})})}) }總結
以上是生活随笔為你收集整理的前端两种播放视频的方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学前端的一些视频
- 下一篇： 前端视频截图的方法canvas.draw