devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue播放直播rtmp_dplayer播放rtsp

作者：IT小白 | 2024-07-22 21:05:59

赞

踩

dplayer播放rtsp
  1. <template>
  2.   <div id="app">
  3.   
  4.     <!-- <github-badge slug="slacrey/vue-aliplayer" /> -->
  5.     <ali-player @play="played" :autoplay="true" :source="aplayer.source"
  6.                 :vid="aplayer.vid" ref="player"></ali-player>
  7.     <div style="margin-top:20px;">
  8.     <button @click="play">播放</button>
  9.     <button @click="pause">暂停</button>
  10.     <button @click="replay">重播</button>
  11.     <button @click="convert">切换</button>
  12.     </div>
  13.   </div>
  14. </template>
  15.  
  16. <script>
  17. import VueAliplayer from "../src/VueAliplayer.vue";
  18. // import GitHubBadge from "vue-github-badge";
  19.  
  20. export default {
  21.   data() {
  22.     return {
  23.       aplayer: {
  24.         source:"rtmp://58.200.131.2:1935/livetv/ahtv",
  25.         vid: "bf9b7e4a36d84aea8cee769765fbc28b",
  26.         videoHeight:"1000px",
  27.         videoWidth:"800px"
  28.       },
  29.       player: null
  30.     };
  31.   },
  32.   methods: {
  33.     played() {
  34.       console.log("play callback");
  35.     },
  36.     play() {
  37.       const player = this.$refs.player.instance;
  38.       player && player.play();
  39.     },
  40.     pause() {
  41.       const player = this.$refs.player.instance;
  42.       player && player.pause();
  43.     },
  44.     replay() {
  45.       const player = this.$refs.player.instance;
  46.       player && player.replay();
  47.     },
  48.     convert() {
  49.       this.aplayer.source = 'rtmp://58.200.131.2:1935/livetv/ahtv';
  50.       const player = this.$refs.player;
  51.       player && player.reloadPlayer();
  52.     }
  53.   },
  54.   components: {
  55.     "ali-player": VueAliplayer,
  56.     // "github-badge": GitHubBadge
  57.   }
  58. };
  59. </script>
  60.  
  61. <style>
  62. body {
  63.   margin: 0;
  64.   padding: 0;
  65.   text-align: center;
  66. }
  67.  
  68. a {
  69.   color: #42b983;
  70.   text-decoration: none;
  71. }
  72.  
  73. .dplayer {
  74.   width: 800px;
  75.   margin: 50px auto;
  76. }
  77.  
  78. h1 {
  79.   font-size: 54px;
  80.   color: #42b983;
  81.   margin: 30px 0 10px;
  82. }
  83.  
  84. h2 {
  85.   font-size: 22px;
  86.   color: #555;
  87. }
  88.  
  89. @media (max-width: 768px) {
  90.   .dplayer {
  91.     width: 90%;
  92.   }
  93.  
  94.   h1 {
  95.     font-size: 30px;
  96.   }
  97.  
  98.   h2 {
  99.     font-size: 16px;
  100.   }
  101. }
  102. </style>

 

 

 

  1. <template>
  2.   <div class="prism-player" :id="playerId" :style="playStyle"></div>
  3. </template>
  4.  
  5. <script>
  6.   export default {
  7.     name: "Aliplayer",
  8.     props: {
  9.       source: {
  10.         type: String,
  11.         default: ""
  12.       },
  13.       //媒体转码服务的媒体Id。
  14.       vid: {
  15.         type: String,
  16.         default: ""
  17.       },
  18.       //播放权证
  19.       playauth: {
  20.         type: String,
  21.         default: ""
  22.       },
  23.       //容器的大小
  24.       height: {
  25.         type: String,
  26.         default: "320px"
  27.       },
  28.       //容器的大小
  29.       width: {
  30.         type: String,
  31.         default: "100%"
  32.       },
  33.       //视频的高度大小
  34.       videoWidth: {
  35.         type: String,
  36.         default: "100%"
  37.       },
  38.       //视频的宽度大小
  39.       videoHeight: {
  40.         type: String,
  41.         default: "320px"
  42.       },
  43.       //播放器自动加载，目前仅h5可用
  44.       preload: {
  45.         type: Boolean,
  46.         default: false
  47.       },
  48.       //播放器默认封面图片，请填写正确的图片url地址。需要autoplay为’false’时，才生效
  49.       cover: {
  50.         type: String,
  51.         default: ""
  52.       },
  53.       //播放内容是否为直播，直播时会禁止用户拖动进度条。
  54.       isLive: {
  55.         type: Boolean,
  56.         default: false
  57.       },
  58.       //播放器是否自动播放，在移动端autoplay属性会失效。
  59.       autoplay: {
  60.         type: Boolean,
  61.         default: false
  62.       },
  63.       //播放器自动循环播放。
  64.       rePlay: {
  65.         type: Boolean,
  66.         default: false
  67.       },
  68.       //指定使用H5播放器。
  69.       useH5Prism: {
  70.         type: Boolean,
  71.         default: false
  72.       },
  73.       //指定使用Flash播放器。
  74.       useFlashPrism: {
  75.         type: Boolean,
  76.         default: false
  77.       },
  78.       //H5是否内置播放，有的Android浏览器不起作用。
  79.       playsinline: {
  80.         type: Boolean,
  81.         default: false
  82.       },
  83.       //显示播放时缓冲图标，默认true。
  84.       showBuffer: {
  85.         type: Boolean,
  86.         default: true
  87.       },
  88.       //URL 皮肤图片，不建议随意修改该字段，如要修改，请参照皮肤定制。
  89.       skinRes: {
  90.         type: String,
  91.         default: ""
  92.       },
  93.  
  94.       skinLayout: {
  95.         type: Array,
  96.         default: function () {
  97.           return []
  98.         }
  99.       },
  100.       //默认为‘hover’。可选的值为：‘click’、‘hover’、‘always’。
  101.       controlBarVisibility: {
  102.         type: String,
  103.         default: "hover"
  104.       },
  105.       //控制栏自动隐藏时间（ms）
  106.       showBarTime: {
  107.         type: String,
  108.         default: ""
  109.       },
  110.       /***
  111.        * JSON串用于定制性接口参数，目前支持：
  112.        1.“fullTitle”：“测试页面”
  113.        全屏时显示视频标题（仅flash支持）。
  114.        2. “m3u8BufferLength”：“30”
  115.        播放m3u8时加载缓存ts文件长度单位（秒）（仅flash支持）。
  116.        3. “liveStartTime”：“2016/08/17 12:00:00”
  117.        直播开始时间，用于提示直播未开始(仅flash支持)。
  118.        4. “liveOverTime”：“2016/08/17 14:00:00”
  119.        直播结束时间，用于提示直播结束（仅flash支持）。
  120.        */
  121.       extraInfo: {
  122.         type: String,
  123.         default: ""
  124.       },
  125.  
  126.       /**
  127.        *是否允许系统右键菜单显示，默认为false。
  128.        */
  129.       enableSystemMenu: {
  130.         type: Boolean,
  131.         default: false
  132.       },
  133.  
  134.       /***
  135.        *
  136.        *指定播放地址格式，只有使用vid的播放方式时支持
  137.        可选值为’mp4’、’m3u8’、’flv’、’mp3’，默认为空，仅H5支持。
  138.        * */
  139.       format: {
  140.         type: String,
  141.         default: "mp4"
  142.       },
  143.       /***
  144.        *
  145.        * 指定返回音频还是视频，只有使用vid的播放方式时支持。
  146.        可选值为’video’和’audio’，默认为’video’
  147.        ‘audio’主要是针对只包含音频的视频格式，比如音频的mp4，仅H5支持。
  148.        * */
  149.       mediaType: {
  150.         type: String,
  151.         default: "video"
  152.       },
  153.       /***
  154.        * 指定排序方式，只有使用vid + plauth播放方式时支持。
  155.        ‘desc’表示按倒序排序（即：从大到小排序）
  156.        ‘asc’表示按正序排序（即：从小到大排序）
  157.        默认值：‘asc’，仅H5支持。
  158.        * */
  159.       qualitySort: {
  160.         type: String,
  161.         default: "asc"
  162.       },
  163.       /***
  164.        * 显示视频清晰度，多个用逗号分隔，比如：’FD,LD’，此值是vid对应流清晰度的一个子集，
  165.        取值范围：FD（流畅）LD（标清）SD（高清）HD（超清）OD（原画）2K（2K）4K（4K），仅H5支持。
  166.        * */
  167.       definition: {
  168.         type: String,
  169.         default: ""
  170.       },
  171.       /**
  172.        * 默认视频清晰度，此值是vid对应流的一个清晰度，
  173.        取值范围：FD（流畅）LD（标清）SD（高清）HD（超清）OD（原画）2K（2K）4K（4K），仅H5支持。
  174.        * */
  175.       defaultDefinition: {
  176.         type: String,
  177.         default: ""
  178.       },
  179.       /**
  180.        * 声明启用同层H5播放器，启用时设置的值为‘h5’
  181.        * */
  182.       x5_type: {
  183.         type: String,
  184.         default: "h5"
  185.       },
  186.       /**
  187.        * 声明视频播放时是否进入到TBS的全屏模式，默认为false。
  188.        当需要把视频做为背景时，设置为true
  189.        * */
  190.       x5_fullscreen: {
  191.         type: Boolean,
  192.         default: false
  193.       },
  194.       /**
  195.        * 声明视频播在界面上的位置，默认为“center”。
  196.        可选值为：“top”，“center”
  197.        * */
  198.       x5_video_position: {
  199.         type: String,
  200.         default: "center"
  201.       },
  202.       /**
  203.        * 声明 TBS 播放器支持的方向，可选值：
  204.        landscape:横屏）
  205.        portraint:竖屏
  206.        landscape
  207.        * */
  208.       x5_orientation: {
  209.         type: String,
  210.         default: "portraint"
  211.       },
  212.       /**
  213.        * 声明TBS全屏播放是否横屏，默认值为true。
  214.        * */
  215.       x5LandscapeAsFullScreen: {
  216.         type: String,
  217.         default: "true"
  218.       },
  219.       /**
  220.        * 延迟播放时间，单位为秒。
  221.        * */
  222.       autoPlayDelay: {
  223.         type: Number,
  224.         default: 0
  225.       },
  226.       /**
  227.        * 延迟播放提示文本
  228.        * */
  229.       autoPlayDelayDisplayText: {
  230.         type: String,
  231.         default: "正在转码，请稍后......"
  232.       },
  233.       /**
  234.        * 国际化，默认为‘zh-cn’。
  235.        如果未设置，则采用浏览器语言。
  236.        可选值为‘zh-cn’、‘en-us’或其它值。
  237.        * */
  238.       language: {
  239.         type: String,
  240.         default: "zh-cn"
  241.       },
  242.       /**
  243.        * 自定义国际化文本json结构，key的值需要和language属性值对应起来。
  244.        例子：{jp:{Play:”Play”}}
  245.        * */
  246.       languageTexts: {
  247.         type: Object,
  248.         default: function () {
  249.           return {}
  250.         }
  251.       },
  252.       /**
  253.        * flash启用截图功能
  254.        * */
  255.       snapshot: {
  256.         type: Boolean,
  257.         default: false
  258.       },
  259.       /**
  260.        * H5设置截图水印。
  261.        * */
  262.       snapshotWatermark: {
  263.         type: Object,
  264.         default: function () {
  265.           return {}
  266.         }
  267.       },
  268.       /**
  269.        * Safari浏览器可以启用Hls插件播放，Safari 11除外。
  270.        * */
  271.       useHlsPluginForSafari: {
  272.         type: Boolean,
  273.         default: false
  274.       },
  275.       /**
  276.        * H5播放flv时，设置是否启用播放缓存，只在直播下起作用。
  277.        * */
  278.       enableStashBufferForFlv: {
  279.         type: Boolean,
  280.         default: false
  281.       },
  282.       /**
  283.        * H5播放flv时，初始缓存大小，只在直播下起作用。
  284.        * */
  285.       stashInitialSizeForFlv: {
  286.         type: Number,
  287.         default: 10
  288.       },
  289.       /**
  290.        * 缓冲多长时间后，提示用户切换低清晰度，默认：20秒。
  291.        * */
  292.       loadDataTimeout: {
  293.         type: Number,
  294.         default: 20
  295.       },
  296.       /**
  297.        *最大缓冲超时时间，超过这个时间会有错误提示，默认：60秒。
  298.        * */
  299.       waitingTimeout: {
  300.         type: Number,
  301.         default: 60
  302.       },
  303.       /**
  304.        * 直播开始时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。
  305.        * */
  306.       liveStartTime: {
  307.         type: String,
  308.         default: ""
  309.       },
  310.       /**
  311.        * 直播结束时间，直播时移功能使用，格式为：“2018/01/04 12:00:00”。
  312.        * */
  313.       liveOverTime: {
  314.         type: String,
  315.         default: ""
  316.       },
  317.       /**
  318.        * 直播可用时移查询地址，详情参见直播时移。
  319.        * https://help.aliyun.com/document_detail/65129.html?spm=a2c4g.11186623.2.28.3603bf80LR74sS
  320.        * */
  321.       liveTimeShiftUrl: {
  322.         type: String,
  323.         default: ""
  324.       },
  325.       /**
  326.        * flv直播和hls时移切换是，重新创建播放器方法，详情参见直播时移。
  327.        * https://help.aliyun.com/document_detail/65129.html?spm=a2c4g.11186623.2.28.3603bf80LR74sS
  328.        * */
  329.       recreatePlayer: {
  330.         type: Function,
  331.         default: function () {
  332.         }
  333.       },
  334.       /**
  335.        *是否显示检测按钮，默认为true。
  336.        * */
  337.       diagnosisButtonVisible: {
  338.         type: Boolean,
  339.         default: true
  340.       },
  341.       /**
  342.        * 禁用进度条的Seek，默认为false，仅Flash支持。
  343.        * */
  344.       disableSeek: {
  345.         type: Boolean,
  346.         default: false
  347.       },
  348.       /**
  349.        * 加密类型，播放点播私有加密视频时，设置值为1，默认值为0。
  350.        * */
  351.       encryptType: {
  352.         type: Number,
  353.         default: 0
  354.       },
  355.       /**
  356.        * 进度条打点内容数组，详情参见进度条打点。
  357.        * [
  358.        {offset:0,text:'阿里视频云端到云到端服务的重要一环'},
  359.        {offset:10,text:'除了支持点播和直播的基础播放功能外'},
  360.        {offset:20,text:'深度融合视频云业务'},
  361.        {offset:30,text:'为用户提供简单、快速、安全、稳定的视频播放服务'},
  362.        {offset:40,text:'安装播放器Demo进行体验'},
  363.        {offset:50,text:'开发人员请点击SDK下载'}
  364.        ]
  365.        * https://yq.aliyun.com/articles/686043?spm=a2c4g.11186623.2.31.3603bf80LR74sS
  366.        * */
  367.       progressMarkers: {
  368.         type: Array,
  369.         default: function () {
  370.           return []
  371.         }
  372.       },
  373.       /**
  374.        * 点播失败重试次数，默认3次
  375.        * */
  376.       vodRetry: {
  377.         type: Number,
  378.         default: 3
  379.       },
  380.       /**
  381.        * 直播播放失败重试次数，默认5次
  382.        * */
  383.       liveRetry: {
  384.         type: Number,
  385.         default: 5
  386.       },
  387.  
  388.       playStyle: {
  389.         type: String,
  390.         default: ""
  391.       },
  392.       aliplayerSdkPath: {
  393.         // Aliplayer 代码的路径
  394.         type: String,
  395.         default: "//g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"
  396.       },
  397.  
  398.  
  399.     },
  400.     data() {
  401.       return {
  402.         playerId: "aliplayer_" + Math.random().toString(36).substr(2),
  403.         scriptTagStatus: 0,
  404.         isReload: false,
  405.         instance: null
  406.       };
  407.     },
  408.     created() {
  409.       if (window.Aliplayer !== undefined) {
  410.         // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
  411.         this.scriptTagStatus = 2;
  412.         this.initAliplayer();
  413.       } else {
  414.         // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
  415.         this.insertScriptTag();
  416.       }
  417.     },
  418.     mounted() {
  419.       if (window.Aliplayer !== undefined) {
  420.         // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
  421.         this.scriptTagStatus = 2;
  422.         this.initAliplayer();
  423.       } else {
  424.         // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
  425.         this.insertScriptTag();
  426.       }
  427.     },
  428.     methods: {
  429.       insertScriptTag() {
  430.         const _this = this;
  431.         let playerScriptTag = document.getElementById("playerScriptTag");
  432.         // 如果这个tag不存在，则生成相关代码tag以加载代码
  433.         if (playerScriptTag === null) {
  434.           playerScriptTag = document.createElement("script");
  435.           playerScriptTag.type = "text/javascript";
  436.           playerScriptTag.src = this.aliplayerSdkPath;
  437.           playerScriptTag.id = "playerScriptTag";
  438.           let s = document.getElementsByTagName("head")[0];
  439.           s.appendChild(playerScriptTag);
  440.         }
  441.         if (playerScriptTag.loaded) {
  442.           _this.scriptTagStatus++;
  443.         } else {
  444.           playerScriptTag.addEventListener("load", () => {
  445.             _this.scriptTagStatus++;
  446.             playerScriptTag.loaded = true;
  447.             _this.initAliplayer();
  448.           });
  449.         }
  450.         _this.initAliplayer();
  451.       },
  452.       initAliplayer() {
  453.         const _this = this;
  454.         // scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成
  455.         if (
  456.           _this.scriptTagStatus === 2 &&
  457.           (_this.instance === null || _this.reloadPlayer)
  458.         ) {
  459.           _this.instance && _this.instance.dispose();
  460.  
  461.           document.querySelector("#" + _this.playerId).innerHTML = "";
  462.  
  463.           // Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
  464.           // 所以，我们只能在 nextTick 里面初始化 Aliplayer
  465.           _this.$nextTick(() => {
  466.             _this.instance = window.Aliplayer({
  467.               id: _this.playerId,
  468.               source: _this.source,
  469.               vid: _this.vid,
  470.               playauth: _this.playauth,
  471.               width: _this.width,
  472.               height: _this.height,
  473.               videoWidth: _this.videoWidth,
  474.               videoHeight: _this.videoHeight,
  475.               preload: _this.preload,
  476.               cover: _this.cover,
  477.               isLive: _this.isLive,
  478.               autoplay: _this.autoplay,
  479.               rePlay: _this.rePlay,
  480.               useH5Prism: _this.useH5Prism,
  481.               useFlashPrism: _this.useFlashPrism,
  482.               playsinline: _this.playsinline,
  483.               showBuffer: _this.showBuffer,
  484.               skinRes: _this.skinRes,
  485.               skinLayout: _this.skinLayout,
  486.               controlBarVisibility: _this.controlBarVisibility,
  487.               showBarTime: _this.showBarTime,
  488.               extraInfo: _this.extraInfo,
  489.               enableSystemMenu: _this.enableSystemMenu,
  490.               format: _this.format,
  491.               mediaType: _this.mediaType,
  492.               qualitySort: _this.qualitySort,
  493.               definition: _this.definition,
  494.               defaultDefinition: _this.defaultDefinition,
  495.               x5_type: _this.x5_type,
  496.               x5_fullscreen: _this.x5_fullscreen,
  497.               x5_video_position: _this.x5_video_position,
  498.               x5_orientation: _this.x5_orientation,
  499.               x5LandscapeAsFullScreen: _this.x5LandscapeAsFullScreen,
  500.               autoPlayDelay: _this.autoPlayDelay,
  501.               autoPlayDelayDisplayText: _this.autoPlayDelayDisplayText,
  502.               language: _this.language,
  503.               languageTexts: _this.languageTexts,
  504.               snapshot: _this.snapshot,
  505.               snapshotWatermark: _this.snapshotWatermark,
  506.               useHlsPluginForSafari: _this.useHlsPluginForSafari,
  507.               enableStashBufferForFlv: _this.enableStashBufferForFlv,
  508.               stashInitialSizeForFlv: _this.stashInitialSizeForFlv,
  509.               loadDataTimeout: _this.loadDataTimeout,
  510.               waitingTimeout: _this.waitingTimeout,
  511.               liveStartTime: _this.liveStartTime,
  512.               liveTimeShiftUrl: _this.liveTimeShiftUrl,
  513.               liveShiftSource: _this.liveShiftSource,
  514.               recreatePlayer: _this.recreatePlayer,
  515.               diagnosisButtonVisible: _this.diagnosisButtonVisible,
  516.               disableSeek: _this.disableSeek,
  517.               encryptType: _this.encryptType,
  518.               progressMarkers: _this.progressMarkers,
  519.               vodRetry: _this.vodRetry,
  520.               liveRetry: _this.liveRetry,
  521.             });
  522.  
  523.             // 绑定事件，当 AliPlayer 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
  524.             _this.instance.on("ready", () => {
  525.               this.$emit("ready", _this.instance);
  526.             });
  527.  
  528.             _this.instance.on("play", () => {
  529.               this.$emit("play", _this.instance);
  530.             });
  531.  
  532.             _this.instance.on("pause", () => {
  533.               this.$emit("pause", _this.instance);
  534.             });
  535.  
  536.             _this.instance.on("ended", () => {
  537.               this.$emit("ended", _this.instance);
  538.             });
  539.  
  540.             _this.instance.on("liveStreamStop", () => {
  541.               this.$emit("liveStreamStop", _this.instance);
  542.             });
  543.  
  544.             _this.instance.on("m3u8Retry", () => {
  545.               this.$emit("m3u8Retry", _this.instance);
  546.             });
  547.  
  548.             _this.instance.on("hideBar", () => {
  549.               this.$emit("hideBar", _this.instance);
  550.             });
  551.  
  552.             _this.instance.on("waiting", () => {
  553.               this.$emit("waiting", _this.instance);
  554.             });
  555.  
  556.             _this.instance.on("snapshoted", () => {
  557.               this.$emit("snapshoted", _this.instance);
  558.             });
  559.  
  560.             _this.instance.on("timeupdate", () => {
  561.               this.$emit("timeupdate", _this.instance);
  562.             });
  563.  
  564.             _this.instance.on("requestFullScreen", () => {
  565.               this.$emit("requestFullScreen", _this.instance);
  566.             });
  567.  
  568.             _this.instance.on("cancelFullScreen", () => {
  569.               this.$emit("cancelFullScreen", _this.instance);
  570.             });
  571.  
  572.             _this.instance.on("error", () => {
  573.               this.$emit("error", _this.instance);
  574.             });
  575.  
  576.             _this.instance.on("startSeek", () => {
  577.               this.$emit("startSeek", _this.instance);
  578.             });
  579.  
  580.             _this.instance.on("completeSeek", () => {
  581.               this.$emit("completeSeek", _this.instance);
  582.             });
  583.           });
  584.         }
  585.       },
  586.       /**
  587.        * 播放视频
  588.        */
  589.       play: function () {
  590.         this.instance.play();
  591.       },
  592.       /**
  593.        * 暂停视频
  594.        */
  595.       pause: function () {
  596.         this.instance.pause();
  597.       },
  598.       /**
  599.        * 重播视频
  600.        */
  601.       replay: function () {
  602.         this.instance.replay();
  603.       },
  604.       /**
  605.        * 跳转到某个时刻进行播放
  606.        * @argument time 的单位为秒
  607.        */
  608.       seek: function (time) {
  609.         this.instance.seek(time);
  610.       },
  611.       /**
  612.        * 获取当前时间 单位秒
  613.        */
  614.       getCurrentTime: function () {
  615.         return this.instance.getCurrentTime();
  616.       },
  617.       /**
  618.        *获取视频总时长，返回的单位为秒
  619.        * @returns 返回的单位为秒
  620.        */
  621.       getDuration: function () {
  622.         return this.instance.getDuration();
  623.       },
  624.       /**
  625.        获取当前的音量，返回值为0-1的实数ios和部分android会失效
  626.        */
  627.       getVolume: function () {
  628.         return this.instance.getVolume();
  629.       },
  630.       /**
  631.        设置音量，vol为0-1的实数，ios和部分android会失效
  632.        */
  633.       setVolume: function (vol) {
  634.         this.instance.setVolume(vol);
  635.       },
  636.       /**
  637.        *直接播放视频url，time为可选值（单位秒）目前只支持同种格式（mp4/flv/m3u8）之间切换暂不支持直播rtmp流切换
  638.        *@argument url 视频地址
  639.        *@argument time 跳转到多少秒
  640.        */
  641.       loadByUrl: function (url, time) {
  642.         this.instance.loadByUrl(url, time);
  643.       },
  644.       /**
  645.        * 设置播放速度
  646.        *@argument speed 速度
  647.        */
  648.       setSpeed: function (speed) {
  649.         this.instance.setSpeed(speed);
  650.       },
  651.       /**
  652.        * 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297
  653.        *@argument w 播放器宽度
  654.        *@argument h 播放器高度
  655.        */
  656.       setPlayerSize: function (w, h) {
  657.         this.instance.setPlayerSize(w, h);
  658.       },
  659.       /**
  660.        *目前只支持H5播放器。
  661.        暂不支持不同格式视频间的之间切换。
  662.        暂不支持直播rtmp流切换。
  663.        */
  664.       replayByVidAndPlayAuth: function (vid, accId, accSecret, stsToken, authInfo, domainRegion) {
  665.         this.instance.replayByVidAndPlayAuth(vid, accId, accSecret, stsToken, authInfo, domainRegion);
  666.       },
  667.  
  668.       /***
  669.        * 重新设置vid和权限，目前只支持H5播放器。
  670.        暂不支持不同格式视频间的之间切换。
  671.        暂不支持直播rtmp流切换。
  672.        * @param vid 视频ID
  673.        * @param playauth 播放权限
  674.        */
  675.       replayByVidAndAuthInfo: function (vid, playauth) {
  676.         this.instance.replayByVidAndAuthInfo(vid, playauth);
  677.       },
  678.  
  679.       /**
  680.        * 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8）之间切换,暂不支持直播rtmp流切换
  681.        *@argument vid 视频id
  682.        *@argument playauth 播放凭证
  683.        */
  684.       reloaduserPlayInfoAndVidRequestMts: function (vid, playauth) {
  685.         this.instance.reloaduserPlayInfoAndVidRequestMts(vid, playauth);
  686.       },
  687.  
  688.       /***
  689.        *设置截图参数
  690.        * @param width 宽度
  691.        * @param height 高度
  692.        * @param rate 截图质量
  693.        */
  694.       setSanpshotProperties: function (width, height, rate) {
  695.         this.instance.setSanpshotProperties(width, height, rate);
  696.       },
  697.       /**
  698.        * 设置封面地址
  699.        * @param cover 封面地址
  700.        */
  701.       setCover: function (cover) {
  702.         this.instance.setCover(cover);
  703.       },
  704.  
  705.  
  706.       reloadPlayer: function () {
  707.         this.isReload = true;
  708.         this.initAliplayer();
  709.         this.isReload = false;
  710.       }
  711.     }
  712.   };
  713. </script>
  714.  
  715. <style>
  716.   @import url(//g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css);
  717. </style>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/866761
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。