当前位置: 首页 > Web前端 > vue.js

vue-aliplayer-v2自定义播放器内置提示文字

时间:2023-03-31 19:49:12 vue.js

需求说明实现播放错误时,自定义提示信息,如下图:如上图,我需要改成自定义内容:'这是一个测试词......'。然后代码如下:data(){return{videoOptions:{source:"",//播放地址isLive:true,//是否开启直播language:'zh-custom',//自定义语言包languageTexts:{//播放器自定义提示文字'zh-custom':{'Video_Error':TipMessage,//视频播放exception'Error_Load_M3U8_Timeout_Text':TipMessage,//获取m3u8文件超时'Error_Load_M3U8_Failed_Text':TipMessage,//获取m3u8文件失败'Live_Abrot':TipMessage,//直播信号中断'Error_Not_Found':TipMessage,//播放地址确实notexist'Refresh_Text':'Refresh','Retry':'Retry','Detection_Text':'Diagnosis',}}},}}由于上面自定义语言包:language:'zh-custom',所有属性属性languageTexts中必须自己重新定义(即'zh-custom'对象中的所有属性都需要一一对应)。文档地址:https://help.aliyun.com/docum...如下图:重新定义以下属性后(部分截图)需要一一修改,自定义内容:修改后的代码如下:videoOptions:{source:"",//播放地址isLive:true,//开启直播language:'zh-custom',//自定义语言包languageTexts:{//播放器自定义提示文字'zh-custom':{'Video_Error':'Thisisatesttext...',//视频播放异常'Error_Load_M3U8_Timeout_Text':'Thisisatesttext...',//获取m3u8文件超时'Error_Load_M3U8_Failed_Text':'Thisisatesttext...',//获取m3u8文件失败'Live_Abrot':'Thisisthetesttext...',//直播信号中断'Error_Not_Found':'Thisisthetesttext...',//播放地址不存在'Refresh_Text':'RefreshA','Retry':'RetryB','Detection_Text':'DiagnoseCA',}}},效果如下: