Apex23.1中交互式网格行点击刷新显示视频的方案咨询

方案一：改造现有DE.DANIELH.VIDEOPLAYER插件实现动态刷新 #

该插件可通过JavaScript动态更新视频源，操作步骤如下：

1. 给交互式网格绑定行点击事件
   打开交互式网格的「高级」属性，在「JavaScript初始化代码」中添加以下逻辑：

   function(config) {
       config.initActions = function(actions) {
           $(this.widgetInteractions).on('click', 'tr', function() {
               // 获取当前选中行的视频URL（替换为你的实际字段名，比如VIDEO_URL）
               const grid = apex.region('YOUR_IG_STATIC_ID').widget().interactiveGrid('getViews','grid');
               const selectedRecord = grid.getSelectedRecords()[0];
               const videoUrl = selectedRecord[0].VIDEO_URL;
   
               // 更新视频插件的源
               const videoElement = $('#YOUR_VIDEO_PLUGIN_STATIC_ID video')[0];
               if (videoElement) {
                   videoElement.src = videoUrl;
                   videoElement.load();
               }
           });
       };
       return config;
   }
   

   注意替换代码中的YOUR_IG_STATIC_ID、YOUR_VIDEO_PLUGIN_STATIC_ID和VIDEO_URL为你页面的实际值。
2. 验证插件DOM结构
   检查插件生成的HTML，确认视频元素的src属性可直接修改。如果插件有封装的API（比如暴露了更新方法），优先使用官方API而非直接操作DOM。

方案二：用原生HTML5视频元素实现（无插件依赖） #

如果不想依赖第三方插件，直接用原生视频标签更灵活：

1. 添加HTML区域
   在页面上新增一个HTML区域，写入视频标签：

   <video id="dynamic-video-player" controls width="640" height="360">
       <source id="video-source" src="" type="video/mp4">
       你的浏览器不支持HTML5视频播放
   </video>
   

2. 绑定行点击事件
   在页面的「JavaScript」属性中添加行点击监听：

   apex.region('YOUR_IG_STATIC_ID').widget().interactiveGrid('getViews','grid').$widget.on('click', 'tr', function() {
       const grid = apex.region('YOUR_IG_STATIC_ID').widget().interactiveGrid('getViews','grid');
       const selectedRecord = grid.getSelectedRecords()[0];
       if (!selectedRecord) return;
   
       const videoUrl = selectedRecord[0].VIDEO_URL;
       document.getElementById('video-source').src = videoUrl;
       document.getElementById('dynamic-video-player').load();
   });
   

   这种方式完全可控，无需依赖插件，兼容性更强。

方案三：使用支持动态切换的替代插件 #

如果想更换插件，推荐以下方向：

• Apex原生媒体组件：Apex 23.1自带的「媒体」组件支持视频播放，将其放入动态区域，行点击时刷新该区域并传递视频URL作为参数，通过动态区域的数据源返回对应视频地址即可。
• 社区灵活插件：选择APEX社区中明确标注支持动态更新视频源的插件，优先挑选有活跃维护记录的版本。

关键注意事项 #

• 确保视频URL可正常访问，跨域视频需配置CORS规则。
• 若视频存储在Apex静态文件或Oracle数据库中，需确认路径/访问权限正确。
• 测试行点击逻辑，避免未选中行时出现报错。

内容的提问来源于stack exchange，提问作者Faezeh_Ebrahimi