前端两种播放视频的方式

最新推荐文章于 2024-09-21 19:36:38 发布

木易66丶

最新推荐文章于 2024-09-21 19:36:38 发布

阅读量2w

点赞数 6

文章标签：前端音视频 elementui

本文链接：https://blog.csdn.net/q_qman/article/details/89308273

版权

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

摘要由CSDN通过智能技术生成

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