前端两种播放视频的方式

两种方式，需要弹窗的话，可以结合layer使用<html><head><script src="vue.js"></script><style type="text/css">video{width: auto;max-height: 100%}&...

木易66丶

20696人浏览 · 2022-02-22 17:16:13

木易66丶 · 2022-02-22 17:16:13 发布

两种方式，需要弹窗的话，可以结合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>

视频操作（很有意思）：

<video
    id="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;
            })
        })
    })
}