【vue】前端页面点击按钮弹窗播放m3u8格式视频

这篇具有很好参考价值的文章主要介绍了【vue】前端页面点击按钮弹窗播放m3u8格式视频。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最终效果:

【vue】前端页面点击按钮弹窗播放m3u8格式视频,vue.js,前端,音视频

1.表格操作列

【vue】前端页面点击按钮弹窗播放m3u8格式视频,vue.js,前端,音视频

<el-table ref="tables" v-loading="loading" :data="list"  :default-sort="defaultSort" @sort-change="handleSortChange" border>
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="第几集" align="center" prop="nPlay" />
      <el-table-column label="播放地址" align="center" prop="playUrl" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-info"
            type="text"
            size="small"
            @click.stop="initVideo(scope.row.playUrl,scope.row.nPlay)"
          >播放视频</el-button>
        </template>
      </el-table-column>
    </el-table>

2.initVideo方法

    data(){
        return{
          dialogUrl:'',
          videoid:undefined,
          videoName:''
        }
    }

    initVideo(url,nPlay) {
      this.title = '《'+this.videoName+'》 第'+nPlay+'集';
      this.dialogUrl = '/video.html?'+url;
      this.open = true;
    },

3.弹出层代码

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="50%"
      class="showAll_dialog"
      :modal='false'
      center>
      <iframe :src="dialogUrl" width="95%" height="95%" style="border: medium none;"></iframe>
    </el-dialog>

4.showAll_dialog样式

<style lang="scss" scoped>
.showAll_dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  ::v-deep .el-dialog {
    margin: 0 auto !important;
    height: 95%;
    overflow: hidden;
    background-color: white;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
      // 下边设置字体,我的需求是黑底白字
      color: white;
      line-height: 30px;
      padding: 0 15px;
    }
  }
}
</style>

5.第2步跳转的video.html页面代码,用dplayer播放的,放在项目根目录的public文件夹即可文章来源地址https://www.toymoban.com/news/detail-766514.html

<!DOCTYPE html>
<html>

<head>
    <title>dplayer播放m3u8</title>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="https://cdn.staticfile.org/hls.js/1.1.2/hls.min.js"></script>
    <script src="https://cdn.staticfile.org/dplayer/1.26.0/DPlayer.min.js"></script>
    <style>
        #dplayer {
            width: 50%;
            /*height: 500px;*/
        }
        *{
            margin: 0;
            padding: 0;
        }
        /* 父容器样式 */
        .container{
            height: 100%;
            background-color: white;
        }
        /* 子容器样式 */
        .son{
            background-color: white;
            /* 水平垂直居中 */
            margin: 0px auto;
        }
    </style>
    <script>
        function init() {
            var str=location.href; //取得整个地址栏
            var url=str.split("?")[1]
            console.log('=====================')
            console.log(url)
            url = url.replaceAll('http:','https:');
            const dp = new DPlayer({
                element: document.getElementById('dplayer'),
                video: {
                    //  pic: videoInfo.img, // 封面
                    url: url,  //此处可以是远程的url,也可以是本地的文件
                    type: 'customHls',
                    customType: {
                        customHls: function (video, player) {
                            const hls = new Hls()
                            hls.loadSource(video.src)
                            hls.attachMedia(video)
                        }
                    }
                }
            })
        }
    </script>
</head>

<body onload="init()">
<div class="container">
    <div id="dplayer" class="son"></div>
</div>
</body>
</html>

到了这里,关于【vue】前端页面点击按钮弹窗播放m3u8格式视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3播放m3u8视频(videoJS)

    需要同时导入videoJS以及相关的CSS 以下时项目使用中自己封装的组件,用起来也很简单,需要的可以对照自取 UI框架为 ant-design-vue

    2024年02月03日
    浏览(41)
  • vue项目中使用m3u8格式播放大视频

    网站中播放大视频时经常卡顿,无法顺利播放,在查找解决方案时发现很多文章建议使用m3u8流媒体播放代替MP4播放,做了下测试,现总结记录下测试过程中遇到的问题与解决办法。 1.使用ffmpeg做视频转换 1)下载ffmpeg  FFmpeg github 2)在环境变量path中加入配置,以便在控制台使

    2024年02月09日
    浏览(53)
  • 在vue中使用dplayer播放hls m3u8格式视频

    Dplayer 官方文档地址 Dplayer官方地址 虽然在vue中有vue-dplayer但却没有对hls进行很好的支持 所以建议还是使用Dplayer 在组件中引入 播放m3u8格式的视频需要框选部分 – 建议查看官方文档MSE支持 切换视频 切换视频需要用到 switchVideo() api 方便大家复制 部分片段

    2024年02月13日
    浏览(35)
  • vue使用video.js实现播放m3u8格式的视频

    我使用的video.js版本如下: 在components下新建一个VideoPlayer文件夹 index如下:  直接把地址传给sourceUrl即可

    2024年02月12日
    浏览(45)
  • 关于vue播放flv,m3u8视频流(监控)的方法

    前文: 随着前端大屏页面的逐渐壮大,客户的需求也越来越多,大屏上面展示的事物也越来越丰     富。其中实时播放监控的需求逐步增加,视频流格式也是有很多种,用到最多的.flv、.m3u8。 一、 JessibucaPlayer插件用来播放flv流 1.首先是先把文件放在vue项目的public下面 2.在

    2023年04月15日
    浏览(89)
  • vue2 使用 vue-video-player 播放m3u8 流地址视频

    安装插件  : 注意需要引入  videojs-contrib-hls ,否则无法播放hls流文件  main.js 引入 代码内引入: 注意点:    1.type: \\\'application/x-mpegURL\\\' ,否则无法播放流文件  2.aspectRatio: \\\'16:9\\\',  宽高比需要进行设置, 若没有进行设置,会出现黑边过高或者过宽的问题 常用API方法:

    2024年02月07日
    浏览(50)
  • Windows上搭建rtsp-simple-server流媒体服务器实现rtsp、rtmp等推流以及转流、前端html与Vue中播放hls(m3u8)视频流

    Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流: Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流_霸道流氓气质的博客-CSDN博客 上面讲了Nginx-http-flv-module+flv.js进行流媒体服务器搭建和前端播放视频流的过

    2024年02月01日
    浏览(59)
  • html5播放 m3u8

    注意:m3u8地址要为网络地址,直接把代码复制为html直接在本地打开,可能不行,需要放在nginx或者apache或者其他的web服务器上运行。

    2024年02月20日
    浏览(34)
  • uniapp 直播拉流 播放m3u8 视频

    在百度中找啦n多个方法 没有解决啦 巨气人 发现hls.js hls.js不需要任何播放器,它可以直接在标准HTML 元素上运行。 安装第三方库 在uniapp页面显示 如果想要应用在自己的页面中 直接c v 就ok啦 要是有人问推流为啥没有 不要问 问就是不会!!!

    2024年02月12日
    浏览(47)
  • 安卓实现M3U8文件的下载和播放

    现如今网络上的视频大多数都是m3u8格式的,使用m3u8格式有以下好处 1. 方便切换码率,例如从高清转到蓝光 2. 节约流量,m3u8实际切割成一段段的TS后缀视频,传统请求是把整个文件流返回去,网络不好或者文件过大时,都会造成响应缓慢,m3u8则是返回一个个的ts文件,当前

    2023年04月20日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包