COS 音视频体验馆提供完整的端侧（Web、Android、iOS）体验示例和代码示例，您可以通过以下方式快速体验。
﻿
﻿

","showToc":true,"toc":"","recentReleaseTime":"2024-01-04 17:06:51","videoConfig":{"position":"top"},"githubUrl":"https://github.com/tencentyun/qcloud-documents/blob/master/product/大数据与AI/万象优图2.0/COS 音视频体验馆.md","isSlate":true,"writeNodeId":"115554057136644096","displayEditEntry":true,"slate":"\"[{\\\"id\\\":\\\"Phg2BR-MxXCgeS-BSattp\\\",\\\"children\\\":[{\\\"text\\\":\\\"COS 音视频体验馆提供完整的端侧（Web、Android、iOS）体验示例和代码示例，您可以通过以下方式快速体验。\\\"}],\\\"type\\\":\\\"p\\\"},{\\\"type\\\":\\\"html-block\\\",\\\"content\\\":\\\"\\u003Cstyle\\u003E\\\\n.markdown-text-box table th,.markdown-text-box table td{\\\\n text-align: center;\\\\n}\\\\n\\u002F*卡片*\\u002F\\\\n.preview-demo-section .preview-demo-item {\\\\n display: inline-block;\\\\n width: 226px;\\\\n height: 300px;\\\\n background: #fff;\\\\n box-shadow: 0 1px 8px 0 rgb(156 175 204 \\u002F 25%);\\\\n border-radius: 1px;\\\\n text-align: center;\\\\n padding: 0 15px;\\\\n margin: 10px 13px 10px 7px;\\\\n vertical-align: top;\\\\n}\\\\n\\u002F*顶部icon距离卡片上方的尺寸*\\u002F\\\\n.preview-demo-section .preview-demo-item .demo-item-header {\\\\n margin-top: 30px;\\\\n}\\\\n\\u002F*卡片文字描述字体大小，如web：功能演示·示例代码*\\u002F\\\\n.preview-demo-section .preview-demo-item .demo-item-desc {\\\\n font-size: 12px;\\\\n}\\\\n\\u002F*web底部链接*\\u002F\\\\n.preview-demo-section .preview-demo-item .demo-item-link-web {\\\\n font-size: 14px;\\\\n margin-top: 53px;\\\\n}\\\\n\\u002F*iOS\\u002FAndroid底部链接*\\u002F\\\\n.preview-demo-section .preview-demo-item .demo-item-link {\\\\n font-size: 14px;\\\\n margin-top: 5px;\\\\n}\\\\n\\\\n a:link { \\\\ntext-decoration: none;\\\\ncolor:#02a3ff; \\\\n}\\\\na:visited {\\\\n color:#02a3ff; \\\\n} \\\\n\\\\n\\\\n\\u002F*卡片标题*\\u002F\\\\n.preview-demo-section .preview-demo-item .demo-item-platform {\\\\n font-size: 20px;\\\\n font-weight: bold;\\\\n}\\\\n\\u002F*卡片顶部icon和标题的距离\\\\n.preview-demo-section .preview-demo-item .demo-logo-wrapper {\\\\n line-height: 1;\\\\n}\\\\n\\u002F*顶部icon图标大小*\\u002F\\\\n.preview-demo-section .preview-demo-item .demo-item-header img {\\\\n box-shadow: none;\\\\n width: 40px;\\\\n height: 40px;\\\\n}\\\\n\\u002F*底部二维码的距离上方位置*\\u002F\\\\n.preview-demo-section .preview-demo-item.style-qrcode .demo-item-download {\\\\n margin-top: 5px;\\\\n}\\\\n\\u002F*web按钮距离上方位置*\\u002F\\\\n.preview-demo-section .preview-demo-item.style-web .demo-item-download {\\\\n margin-top: 40px;\\\\n}\\\\n\\u002F*底部二维码大小*\\u002F\\\\n.preview-demo-section .preview-demo-item .demo-item-download img {\\\\n box-shadow: none;\\\\n width: 110px;\\\\n height: 110px;\\\\n}\\\\n\\u002F*web内部按钮*\\u002F\\\\n.preview-demo-section .preview-demo-item.style-web .demo-item-download .demo-item-download-btn {\\\\n color: #fff;\\\\n border-radius: 20px;\\\\n background-color: #00a4ff;\\\\n height: 35px;\\\\n width: 170px;\\\\n line-height: 35px;\\\\n margin-bottom: 6px;\\\\n margin: auto;\\\\n}\\\\n\\u002F*内部按钮悬停展示手图标*\\u002F\\\\n.preview-demo-section .preview-demo-item .demo-item-download .demo-item-download-btn:hover {\\\\n cursor: pointer;\\\\n}\\\\n\\\\n\\\\n\\u003C\\u002Fstyle\\u003E\\\\n\\\\n\\u003Cdiv class=\\\\\\\"preview-demo-section\\\\\\\" id=\\\\\\\"demo-card\\\\\\\"\\u003E\\\\n \\u003Cdiv class=\\\\\\\"preview-demo-item style-web\\\\\\\"\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-header\\\\\\\"\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-logo-wrapper\\\\\\\"\\u003E\\\\n \\u003Cimg src=\\\\\\\"https:\\u002F\\u002Fqcloudimg.tencent-cloud.cn\\u002Fraw\\u002Fff4dc34a1c72fdb26fc41c1268898025.svg\\\\\\\" data-nonescope=\\\\\\\"true\\\\\\\" \\u002F\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-platform\\\\\\\"\\u003EWeb\\u003C\\u002Fdiv\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-desc\\\\\\\"\\u003E\\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-download\\\\\\\"\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-download-btn\\\\\\\"\\u003E \\u003Ca style=\\\\\\\"color:white\\\\\\\" href=\\\\\\\" https:\\u002F\\u002Fcloud.tencent.com\\u002Fact\\u002Fpro\\u002Fcos-video\\\\\\\"\\u003E立即体验\\u003C\\u002Fa\\u003E\\u003C\\u002Fdiv\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-link-web\\\\\\\"\\u003E\\\\n \\u003Ca href=\\\\\\\"https:\\u002F\\u002Fgithub.com\\u002Ftencentyun\\u002Fcos-demo\\u002Ftree\\u002Fmain\\u002Fcos-video\\u002Fexamples\\u002Fweb\\\\\\\"\\u003E示例代码\\u003C\\u002Fa\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"preview-demo-item style-qrcode\\\\\\\"\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-header\\\\\\\"\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-logo-wrapper\\\\\\\"\\u003E\\\\n \\u003Cimg src=\\\\\\\"https:\\u002F\\u002Fqcloudimg.tencent-cloud.cn\\u002Fraw\\u002F36154dc8bb7c93826dbdc6fdcec4e194.svg\\\\\\\" data-nonescope=\\\\\\\"true\\\\\\\" \\u002F\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-platform\\\\\\\"\\u003EiOS\\u003C\\u002Fdiv\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-desc\\\\\\\"\\u003E\\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-download\\\\\\\"\\u003E\\\\n \\u003Cimg src=\\\\\\\"https:\\u002F\\u002Fqcloudimg.tencent-cloud.cn\\u002Fraw\\u002F9800b877b7c6d757b2811725da4520b7.png\\\\\\\" \\u002F\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-link\\\\\\\"\\u003E\\\\n \\u003Ca href=\\\\\\\"https:\\u002F\\u002Fgithub.com\\u002Ftencentyun\\u002Fcos-demo\\u002Ftree\\u002Fmain\\u002Fcos-video\\u002Fexamples\\u002Fios\\\\\\\"\\u003E示例代码\\u003C\\u002Fa\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"preview-demo-item style-qrcode\\\\\\\" style=\\\\\\\"margin-left:0\\\\\\\"\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-header\\\\\\\"\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-logo-wrapper\\\\\\\"\\u003E\\\\n \\u003Cimg src=\\\\\\\"https:\\u002F\\u002Fqcloudimg.tencent-cloud.cn\\u002Fraw\\u002F53be7f245c4d11d3aefcb6dc53918757.svg\\\\\\\" data-nonescope=\\\\\\\"true\\\\\\\" \\u002F\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-platform\\\\\\\"\\u003EAndroid\\u003C\\u002Fdiv\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-desc\\\\\\\"\\u003E\\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-download\\\\\\\"\\u003E\\\\n \\u003Cimg src=\\\\\\\"https:\\u002F\\u002Fqcloudimg.tencent-cloud.cn\\u002Fraw\\u002F342deb84c801806fc7fa9e742a5e6b79.png\\\\\\\" \\u002F\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003Cdiv class=\\\\\\\"demo-item-link\\\\\\\"\\u003E\\\\n \\u003Ca href=\\\\\\\"https:\\u002F\\u002Fgithub.com\\u002Ftencentyun\\u002Fcos-demo\\u002Ftree\\u002Fmain\\u002Fcos-video\\u002Fexamples\\u002Fandroid\\\\\\\"\\u003E示例代码\\u003C\\u002Fa\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\u003C\\u002Fdiv\\u003E\\\\t\\\\t\\\\n \\u003C\\u002Fdiv\\u003E\\\\n \\\\n\\\",\\\"children\\\":[{\\\"text\\\":\\\"\\\"}],\\\"id\\\":\\\"VE49tSTtZ2z2cnEIllbew\\\"},{\\\"type\\\":\\\"p\\\",\\\"children\\\":[{\\\"text\\\":\\\"\\\"}],\\\"id\\\":\\\"uzVCJ-m-PWUeL6hYQaB3G\\\"}]\"","sdkPath":"//qcloudimg.tencent-cloud.cn/static/document/tea-slate-sdk.v0.1.11"},"relationConfig":{"switch":0},"shareConfig":[],"advanced":[]},"relatedHotArticleList":[]},"staticContext":{"isMobile":false,"isMiniProgram":false,"isWechat":false,"isPreview":false,"originalUrl":"/document/product/436/77751","CDN_DOMAIN":"cloudcache.tencent-cloud.com","QCLOUD_DOMAIN":"cloud.tencent.com","isLegalReferer":true,"ssrInfo":{},"language":"zh","requestId":"aW3D-VToR"}},"0-0":null},"actionData":null,"errors":null}

COS 音视频播放器体验馆