在H5页面间传递和获取选中的视频

在H5应用中，从一个页面选择视频后传递到另一个页面，有几种常见的方法可以实现：

方法一：URL参数传递

// 在选择视频的页面
function selectVideo(videoId, videoTitle) {
  // 跳转到新页面并传递参数
  window.location.href = `play.html?id=${videoId}&title=${encodeURIComponent(videoTitle)}`;
}

// 在接收页面(play.html)获取参数
function getUrlParams() {
  const params = new URLSearchParams(window.location.search);
  return {
    id: params.get('id'),
    title: params.get('title')
  };
}

const videoInfo = getUrlParams();
console.log('要播放的视频:', videoInfo);

方法二：使用localStorage/sessionStorage

// 在选择视频的页面
function selectVideo(video) {
  // 存储视频信息
  localStorage.setItem('selectedVideo', JSON.stringify(video));
  // 跳转到播放页面
  window.location.href = 'play.html';
}

// 在播放页面
const selectedVideo = JSON.parse(localStorage.getItem('selectedVideo'));
if (selectedVideo) {
  console.log('要播放的视频:', selectedVideo);
  // 使用完后可以清除
  localStorage.removeItem('selectedVideo');
}

方法三：使用Web存储API的更安全方式

// 选择页面
function selectVideo(video) {
  sessionStorage.setItem('currentVideo', JSON.stringify(video));
  window.location.href = 'play.html';
}

// 播放页面
window.addEventListener('DOMContentLoaded', () => {
  const videoData = sessionStorage.getItem('currentVideo');
  if (videoData) {
    const video = JSON.parse(videoData);
    console.log('播放视频:', video);
    sessionStorage.removeItem('currentVideo');
  }
});

方法四：使用前端路由(适用于SPA应用)

如果是单页应用(如Vue, React等)，可以通过路由状态或全局状态管理：

// Vue Router示例
this.$router.push({
  path: '/play',
  query: {
    videoId: '123',
    title: '示例视频'
  }
});

// 或者使用状态管理(Vuex/Pinia/Redux等)
store.commit('setSelectedVideo', video);
this.$router.push('/play');

实际应用建议

1. 简单场景：使用URL参数或sessionStorage
2. 复杂数据：使用localStorage或sessionStorage
3. 单页应用：使用路由状态或状态管理工具
4. 安全性：敏感数据不要用URL传递

完整示例

<!-- 选择页面 select.html -->
<button onclick="selectVideo('v001', '示例视频')">选择视频</button>

<script>
function selectVideo(id, title) {
  // 方法1: URL参数
  // window.location.href = `play.html?id=${id}&title=${encodeURIComponent(title)}`;
  
  // 方法2: sessionStorage
  sessionStorage.setItem('selectedVideo', JSON.stringify({id, title}));
  window.location.href = 'play.html';
}
</script>

<!-- 播放页面 play.html -->
<div id="videoPlayer"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 方法1: 获取URL参数
  // const params = new URLSearchParams(window.location.search);
  // const video = {
  //   id: params.get('id'),
  //   title: params.get('title')
  // };
  
  // 方法2: 获取sessionStorage数据
  const video = JSON.parse(sessionStorage.getItem('selectedVideo'));
  sessionStorage.removeItem('selectedVideo');
  
  if (video) {
    document.getElementById('videoPlayer').innerHTML = `
      <h2>正在播放: ${video.title}</h2>
      <video controls width="500" src="/videos/${video.id}.mp4"></video>
    `;
  } else {
    alert('没有选择视频！');
    window.history.back();
  }
});
</script>

选择哪种方法取决于你的具体需求和应用架构。对于简单的H5页面，URL参数或Web Storage API通常是最简单直接的解决方案。