| Web播放器基础功能和参数设置 | 您所在的位置：网站首页 › 播放器怎么设置循环播放功能 › Web播放器基础功能和参数设置 |
Web播放器基础功能和参数设置
|
常用设置 H5模式和Flash模式播放FLV和HLS视频需要配置跨域访问。配置方法请参见配置跨域访问。 H5模式如未配置跨域访问，播放时浏览器会报以下错误： No 'Access-Control-Allow-Origin' header is present on the requested resource. Flash模式如未配置跨域访问，播放时浏览器会报以下错误： 全屏播放后可通过input设置绝对定位来唤起软键盘 。 接口调用规则Web播放器的基础功能由属性或接口实现。 说明属性和接口的详细描述请参见接口说明。 接口的调用规则如下： HTML5播放模式 在创建播放器构造函数的回调函数里调用。示例如下： //H5播放模式 var player = new Aliplayer({},function(player) { player.play(); });Flash播放模式 在ready事件发生之后或创建播放器ready回调里调用。示例如下： //Flash播放模式 player.on('ready',function(e) { player.play(); });控制播放Web播放器支持从指定时间点播放和暂停播放等操作。H5模式和Flash模式使用的接口一样。 从指定时间开始播放 指跳转到某个时刻进行播放，由seek接口实现。示例如下： //time为指定的时间，单位：秒。 player.seek(time)暂停播放 指暂停播放视频，由pause接口实现。示例如下： player.pause()说明如需展示大播放按钮，则需传入参数true，设置示例：player.pause(true)。 设置显示模式Web播放器仅H5模式支持旋转、镜像等显示设置。 说明支持桌面端和iOS的浏览器。 支持Android（Chrome浏览器、Firefox浏览器）。 微信和大部分浏览器，由于视频被劫持播放，使用自带的播放器，所以不支持此功能。 旋转 指画面按指定角度旋转，由setRotate接口实现。设置后还可查询旋转角度。示例如下： //设置旋转角度。正数为顺时针旋转，负数为逆时针旋转。如：player.setRotate(180)表示顺时针旋转180度。 player.setRotate() //获取旋转角度。 player.getRotate()镜像 支持水平镜像和垂直镜像，由setImage接口实现。示例如下： //水平镜像 player.setImage('horizon') //垂直镜像 player.setImage('vertical')此外，Web播放器还提供两个属性videoHeight和videoWidth用于设置视频的宽度和高度，高度和宽度一般比容器的小，这样旋转和镜像时不会溢出到父容器外面，示例如下： width: '100%', //容器的大小 height: '100%', //容器的大小 videoHeight:"200px", //视频的高度大小获取播放信息Web播放器支持获取当前的播放进度和播放时长信息。 获取当前播放进度 指获取当前的播放时刻，由getCurrentTime接口实现。示例如下： //接口返回的时间单位为秒。 player.getCurrentTime()获取播放时长 指获取视频总时长。需要在视频加载完成以后才可以获取到，可以在play事件后获取。由getDuration实现，示例如下： player.getDuration()监听播放状态指监听播放器的状态。由getStatus接口实现。返回值包括： init：初始化。 ready：准备。 loading：加载中。 play：播放。 pause：暂停。 playing：正在播放。 waiting：等待缓冲。 error：错误。 ended：结束。 示例如下： player.getStatus()设置音量设置音量包括音量调节和静音设置。 说明由于video.volume在iOS 和一些Android系统中是可读属性，阿里云Web播放器提供的音量调节方法getVolume和setVolume在iOS系统和部分Android系统会失效。 音量调节 指调节音量大小，由setVolume接口实现。设置后还可获取音量信息。示例如下： //volume的值为0～1之间的实数。 player.setVolume(0) //获取音量信息。 player.getVolume()静音设置 指将播放中的视频设置为静音状态，由mute接口实现。示例如下： // 设置静音 player.mute(); // 取消静音 player.unMute();倍速播放仅H5模式支持倍速播放。Web播放器SDK默认的UI自带倍速功能，用户观看时可通过界面选择倍速。如果自定义UI，可通过setSpeed接口实现倍速功能。 说明关闭倍速设置请参见接口说明中关于setSpeed的描述。 示例如下： //设置倍速。以下示例表示设置为2倍速。 player.setSpeed(2)多清晰度播放指通过设置多路清晰度流的地址，达成多清晰度播放的效果。 如果使用VID+PlayAuth方式播放，无需额外设置。Web播放器SDK会从点播服务获取清晰度列表。观众点击播放界面控制栏里的设置按钮可以看到清晰度列表。 说明VID+PlayAuth方式下，H5播放模式可以通过设置format属性选择播放MP4或MP3播放格式，默认为MP4格式播放。 如果使用URL播放方式播放（即通过设置source属性播放），需要在source属性设置中通过JSON结构的键值对（Key-Value Pair）指定多路清晰度流的地址。设置生效后观众点击播放界面控制栏里的设置按钮可以看到清晰度列表。 说明如需改变清晰度列表的UI，可以通过引用清晰度组件实现。代码示例请参见功能展示。 URL播放方式下，source属性设置中可通过JSON结构的键值对（Key-Value Pair）包括： "OD": "" "FD": "" "LD"："" "SD": "" "HD": "" "2K": "" "4K": ""以下是URL播放方式设置清晰度的示例代码： //示例设置清晰度为超清和高清的地址。 source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'Web播放器还支持通过设置qualitySort属性，表示启用升序还是降序排列清晰度。 desc表示按倒序排序（从大到小排序）。 asc表示按正序排序（从小到大排序）。 说明清晰度切换会记住用户当前选择的清晰度，下次重新打开播放视频时，会优先选择上次选择的清晰度，没有则按默认逻辑选择低清晰度播放。 用户选择的清晰度不能播放时，会自动切换到下一个清晰度并提示，仅H5支持。 循环播放Web播放器支持通过设置rePlay属性或监听ended事件实现循环播放。 设置rePlay属性示例 rePlay:true监听ended事件示例 player.on('ended',function(){ player.replay() })相关文档进阶功能 插件组件 接口说明 Web播放器常见问题 进度条打点 实现自定义组件 如何使用Web播放器SDK诊断工具 配置延迟播放 H5自定义错误UI 配置跨域访问 直播出错恢复处理 配置skinLayout属性 设置播放器皮肤 |
【本文地址】