Question

我正在使用HTML5视频标签在我的网站上播放视频。当点击某个图像时，我想让它拉起视频播放器并播放相应的视频。有关如何执行此操作并使其在所有浏览器中兼容的任何想法吗？

继承视频播放器，所以我希望src根据点击的图像而改变

<video width="320" height="240" controls>
<source src="" class="videoPlayer">
<source src="" class="videoPlayer">
</video>

点击图片

<img src="images/1.jpg" class="boxImage" data-project="Project"   
data-videos="images/Portfolio/Test.webm, images/Portfolio/Test.mp4">

<img src="images/2.jpg" class="boxImage" data-project="Project"   
data-videos="images/Portfolio/Test2.webm, images/Portfolio/Test2.mp4">

Answer 1

var video = document.querySelector('video');

video.oncanplaythrough = function() {
  video.play();
};

$('.boxImage').on('click', function() {
  var data_videos = $(this).data('videos').split(',');
  for (var i = 0, l = data_videos.length; i < l; i++) {
    var mime_type = 'video/' + data_videos[i].split('.').pop();
    if ( video.canPlayType(mime_type) ) {
      video.src = data_videos[i];
      break;
    }
  }
});

Demo

将相应的视频播放到HTML5视频中的不同链接

1 个答案: