制作一个持久的非js html5播放器

Question

I'm currently developing a site for my music. 我目前正在开发一个音乐网站。 It's going great and all, but I wanted to ask (I did google a bit) Is it possible to create a persistent non javascript html5 player as an iframe at the top of your page, and have it not mess up bookmarking? 一切顺利，但是我想问一下（我在Google上做了一点）是否可以在页面顶部将持久的非javascript html5播放器创建为iframe，并且不会破坏书签？ Additionally, I would love if elements on the page could interact with the player inside the iframe. 此外，如果页面上的元素可以与iframe中的播放器进行交互，我希望能做到这一点。 Thanks! 谢谢！

Answer 1

As @KJPrice has pointed out, there isn't really much you can do here, that doesn't involve JS in some way. 正如@KJPrice指出的那样，您在这里实际上无能为力，并且在某种程度上不涉及JS。

If you'd like the default experience 如果您想要默认的体验

<header>
  <nav ><!-- ... --></nav>
  <audio src="..." controls></audio>
</header>

...with very limited styling available to it, that's available to you. ...只有非常有限的样式可供您使用。

If you want to style something separately, that's going to require separate HTML/JS. 如果要单独设置样式，则需要单独的HTML / JS。

Moreover, if you want to play an album (ie: play a bunch of mp3s in order, as each one finishes), that'll require more JS. 而且，如果您想播放一张专辑（即：依次播放一堆mp3，每张完成时），则需要更多的JS。

But your alternative doesn't really change that... If you're relying on a plain <audio controls> tag, inside of an iframe , then you are both getting the default browser look and you need JS to talk between iframes, and you need JS in the iframe to change songs / manage the playlist for the player, which is 2x the headache for the same functionality. 但是您的替代方法并不会真正改变...如果您依赖于iframe内的普通<audio controls>标签，那么您都将获得默认的浏览器外观，并且需要JS在iframe之间进行对话，并且您需要在iframe中使用JS来更改歌曲/管理播放器的播放列表，这是相同功能的两倍。

Another problem is putting the navigation in an iframe . 另一个问题是将导航置于iframe 。 You now need to either use JS to talk across the iframe boundary, to tell the parent to change the page (bad), or rely on target attributes of link tags (also bad). 现在，您需要使用JS跨iframe边界进行对话，告诉父级更改页面（不好），或者依赖链接标记的目标属性（也很不好）。

Worse yet, if you do get all of this working, when the parent window changes the page, it is going to unload the iframe , too. 更糟糕的是，如果您确实可以完成所有这些工作，那么当父窗口更改页面时，它也会卸载iframe 。

You can, of course, solve that by adding multiple iframes , and then use the parent page to manage the URLs and communication between all of the children, but that's a double-plus ungood idea, for way too many reasons. 当然，您可以通过添加多个iframes解决该问题，然后使用父页面来管理所有子项之间的URL和通信，但这是一个双重的好主意，原因有很多。

Rather than most of this headache, if you want to maintain bookmarkability, while also supporting a persistent player, which never stops, I'd suggest looking at something like Angular and the angular-router module. 如果您要保持可书签性，同时还支持永不停止的播放器，而不是大多数麻烦，我建议您看一下Angular和angular-router模块。

There's a learning curve, but if the rest of your pages are just static .html files, then you should have a pretty straight path for running the nav and player in index.html, while changing the URL you're on will swap out the main content of the page, without leaving the page (hence, the player gets to continue playing). 有一个学习曲线，但是如果您的其余页面只是静态的.html文件，那么您应该在index.html中有一个很简单的路径来运行导航和播放器，同时更改您所使用的URL会换出页面的主要内容，而无需离开页面（因此，播放器可以继续播放）。

There are other solutions; 还有其他解决方案。 you don't even need a framework/router, but the amount of DiY pain that Angular swallows for you in this case is pretty large, if you don't adore doing nitty-gritty JS+DOM+BOM+AJAX stuff. 您甚至不需要框架/路由器，但是如果您不喜欢做一些坚韧不拔的JS + DOM + BOM + AJAX的东西，那么在这种情况下Angular会为您吞下的DiY痛苦非常大。

EDIT 编辑

Given that you're new to JS, I figured I'd pop something in here to help: 鉴于您是JS的新手，所以我想在这里提供一些帮助：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  </head>
  <body>
    <audio src="./my-song.mp3" controls></audio>
  </body>
</html>

Then, once you have that page written, saved and loaded in your browser, open your DevTools, and go to the console tab. 然后，将该页面编写，保存并加载到浏览器中之后，打开DevTools，然后转到控制台选项卡。

Quick JS Primer, with none of the basics: 快速JS入门，没有任何基础知识：

// this double-slash is a single-line comment
/*
  this is a multi-line comment
  just like CSS
*/

// console.log is a method (or function), which will print whatever you pass it into the console tab
// it's a good way of starting to see what's going on inside of a program;
// there are better ways of understanding in the future, but to get your hands dirty, it's just fine
// console.log( ANY DATA, OTHER DATA, MORE DATA );
console.log(1, 2, 3); // prints "1  2  3"

// `var` is a keyword, representing a variable (just like algebra, a word representing something to be calculated/used)
// only use `var` when you're creating the variable, not after it's been created and you're interacting with it
// name it something meaningful; in a real program, there will be *lots* of them...  ...naming them all "a" is counterproductive
var song = document.querySelector("audio");

// to play the song, use
song.play();

// to pause the song, use
song.pause();

// to see how many seconds you are currently into the song, use
console.log(song.currentTime);

// to see how many seconds are in the song use
console.log(song.duration);

// to rewind the song, set
song.currentTime = 0;

// if you want to know how far along you are in the song, you can do something like
var time = song.currentTime;
var totalTime = song.duration;
console.log( time / totalTime * 100 );

Note, I could have named song anything I wanted to... var audio = ... , var player = ... , var media = ... . 请注意，我可以将song命名为任何想要的名称... var audio = ... ， var player = ... ， var media = ...

Just work with what makes sense. 只要在有意义的地方工作即可。

Another thing you can do is create your own functions that you can run: 您可以做的另一件事是创建自己的可以运行的函数：

function playSong (song) {
  song.play();
}

function pauseSong (song) {
  song.pause();
}

function seekSong (song, time) {
  song.currentTime = time;
}

function stopSong (song) {
  pauseSong(song);
  seekSong(song, 0);
}

Again, after you've defined things like this, you can call them similar to how you called .play( ) and .pause( ) before. 同样，在定义了类似的内容之后，您可以像之前调用.play( )和.pause( )一样调用它们。

playSong( song );

pauseSong( song );

stopSong( song );

seekSong( song, 30 ); // seek to 30 seconds in

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement

That's the link to the API for media elements. 这是指向媒体元素API的链接。

MDN also has a decent primer on learning JS in general. 一般而言，MDN也有不错的入门JS学习入门。

制作一个持久的非js html5播放器

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-05-28 02:06:51

EDIT 编辑

制作一个持久的非js html5播放器

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-05-28 02:06:51

EDIT 编辑

解决方案1
0 已采纳 2015-05-28 02:06:51