前端两种播放视频的方式

最新推荐文章于 2025-10-10 09:11:55 发布

原创最新推荐文章于 2025-10-10 09:11:55 发布 · 2.1w 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #音视频 #elementui

本文介绍了如何通过HTML结合Vue.js实现视频的内联播放，并展示了如何使用iframe嵌入外部Youku视频。同时，展示了视频操作技巧，如暂停、播放、时间更新事件的处理，适合前端开发者学习视频元素的交互控制。

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