HTML5视频播放器：动态加载视频 [英] HTML5 video player: dynamically loading videos

问题描述

所以，使用符合HTML 5的视频播放器（如Video JS）会如何动态加载视频，而无需重新加载整个页面？想象一下，链接列表（如播放列表），每个链接都指向一个视频。点击链接时，我想将所选视频加载到播放器中。

So, using a HTML 5 compliant video player, (like Video JS) how would one go about loading a video dynamically, without having to reload the entire page? Imagine, a list of links (something like a playlist), and each link points to a video. When clicking the link, I want to load the selected video into player.

目前，我正在使用一个持有视频播放器的Iframe，所以基本上我通过了变量到iframe，并重新加载它。我不认为这是理想的，原因有几个;它不允许视频全屏幕，后退按钮移动iframe不只是主页面，加上它是一个iframe。我宁愿避免这种情况。

Currently, I'm using an Iframe that holds the video player, so basically a I pass a variable on to the Iframe, and reload it. I don't think this is ideal, for a few reasons; it doesn't allow the video to go full screen, the Back button moves the Iframe back not just the main page, plus, it's an Iframe. I'd rather avoid this.

想法？谢谢！

推荐答案

找到一个简单的解决方案。这是脚本;把它放在头上：

Came up with a simple solution. Here's the script; throw this in the head:

function vidSwap(vidURL) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}

然后HREF将调用函数：

And then the HREF will call the function:

<a href="#" onClick="javascript:vidSwap('myMovie.m4v'); return false;">Link</a>

这篇关于HTML5视频播放器：动态加载视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！