js代码实现视频播放

使用HTML5的<video>标签嵌入视频

HTML5提供了<video>标签，可以直接在网页中嵌入视频播放器。通过JavaScript可以控制视频的播放、暂停、音量等。

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  const video = document.getElementById('myVideo');

  // 播放视频
  function playVideo() {
    video.play();
  }

  // 暂停视频
  function pauseVideo() {
    video.pause();
  }

  // 调整音量
  function setVolume(volume) {
    video.volume = volume;
  }
</script>

使用第三方库如Video.js

Video.js是一个开源的HTML5视频播放器库，支持多种格式和自定义样式。

<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.15.4/video.js"></script>

<video id="myVideo" class="video-js" controls preload="auto" width="640" height="264">
  <source src="movie.mp4" type="video/mp4">
</video>

<script>
  const player = videojs('myVideo');

  // 播放视频
  player.play();

  // 暂停视频
  player.pause();

  // 调整音量
  player.volume(0.5);
</script>

使用YouTube或Vimeo的嵌入API

通过YouTube或Vimeo的API，可以在网页中嵌入和控制来自这些平台的视频。

<div id="player"></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script>
  let player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '360',
      width: '640',
      videoId: 'VIDEO_ID',
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }
</script>

使用WebRTC实现实时视频流

WebRTC可以用于实现实时视频流的播放和控制，适用于视频通话或直播场景。

<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>

<script>
  const localVideo = document.getElementById('localVideo');
  const remoteVideo = document.getElementById('remoteVideo');

  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
      localVideo.srcObject = stream;
      // 这里可以添加代码将流发送到远程对等端
    })
    .catch(error => {
      console.error('Error accessing media devices:', error);
    });
</script>

使用MediaSource Extensions实现自适应流

MediaSource Extensions (MSE) 允许JavaScript动态构建媒体流，适用于实现自适应比特率流（如DASH或HLS）。

<video id="mseVideo" controls></video>

<script>
  const video = document.getElementById('mseVideo');
  const mediaSource = new MediaSource();

  video.src = URL.createObjectURL(mediaSource);

  mediaSource.addEventListener('sourceopen', () => {
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    fetch('segment1.mp4')
      .then(response => response.arrayBuffer())
      .then(data => {
        sourceBuffer.appendBuffer(data);
      });
  });
</script>

自定义视频播放器UI

可以通过JavaScript和CSS完全自定义视频播放器的用户界面。

<div class="custom-player">
  <video id="customVideo" width="640" height="360">
    <source src="movie.mp4" type="video/mp4">
  </video>
  <div class="controls">
    <button id="playBtn">Play</button>
    <button id="pauseBtn">Pause</button>
    <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1">
  </div>
</div>

<script>
  const video = document.getElementById('customVideo');
  const playBtn = document.getElementById('playBtn');
  const pauseBtn = document.getElementById('pauseBtn');
  const volumeSlider = document.getElementById('volumeSlider');

  playBtn.addEventListener('click', () => video.play());
  pauseBtn.addEventListener('click', () => video.pause());
  volumeSlider.addEventListener('input', () => {
    video.volume = volumeSlider.value;
  });
</script>

<style>
  .custom-player {
    position: relative;
    width: 640px;
  }
  .controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.5);
    padding: 10px;
    box-sizing: border-box;
  }
</style>

这些方法涵盖了从简单的视频嵌入到高级的视频流处理的各种场景，可以根据具体需求选择适合的实现方式。