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

Question

我目前正在開發一個音樂網站。 一切順利，但是我想問一下（我在Google上做了一點）是否可以在頁面頂部將持久的非javascript html5播放器創建為iframe，並且不會破壞書簽？ 此外，如果頁面上的元素可以與iframe中的播放器進行交互，我希望能做到這一點。 謝謝！

Answer 1

正如@KJPrice指出的那樣，您在這里實際上無能為力，並且在某種程度上不涉及JS。

如果您想要默認的體驗

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

...只有非常有限的樣式可供您使用。

如果要單獨設置樣式，則需要單獨的HTML / JS。

而且，如果您想播放一張專輯（即：依次播放一堆mp3，每張完成時），則需要更多的JS。

但是您的替代方法並不會真正改變...如果您依賴於iframe內的普通<audio controls>標簽，那么您都將獲得默認的瀏覽器外觀，並且需要JS在iframe之間進行對話，並且您需要在iframe中使用JS來更改歌曲/管理播放器的播放列表，這是相同功能的兩倍。

另一個問題是將導航置於iframe 。 現在，您需要使用JS跨iframe邊界進行對話，告訴父級更改頁面（不好），或者依賴鏈接標記的目標屬性（也很不好）。

更糟糕的是，如果您確實可以完成所有這些工作，那么當父窗口更改頁面時，它也會卸載iframe 。

當然，您可以通過添加多個iframes解決該問題，然后使用父頁面來管理所有子項之間的URL和通信，但這是一個雙重的好主意，原因有很多。

如果您要保持可書簽性，同時還支持永不停止的播放器，而不是大多數麻煩，我建議您看一下Angular和angular-router模塊。

有一個學習曲線，但是如果您的其余頁面只是靜態的.html文件，那么您應該在index.html中有一個很簡單的路徑來運行導航和播放器，同時更改您所使用的URL會換出頁面的主要內容，而無需離開頁面（因此，播放器可以繼續播放）。

還有其他解決方案。 您甚至不需要框架/路由器，但是如果您不喜歡做一些堅韌不拔的JS + DOM + BOM + AJAX的東西，那么在這種情況下Angular會為您吞下的DiY痛苦非常大。

編輯

鑒於您是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>

然后，將該頁面編寫，保存並加載到瀏覽器中之后，打開DevTools，然后轉到控制台選項卡。

快速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 );

請注意，我可以將song命名為任何想要的名稱... var audio = ... ， var player = ... ， var media = ...

只要在有意義的地方工作即可。

您可以做的另一件事是創建自己的可以運行的函數：

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);
}

同樣，在定義了類似的內容之后，您可以像之前調用.play( )和.pause( )一樣調用它們。

playSong( song );

pauseSong( song );

stopSong( song );

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

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

這是指向媒體元素API的鏈接。

一般而言，MDN也有不錯的入門JS學習入門。

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

問題描述

1 個解決方案

解決方案1
0 已采納 2015-05-28 02:06:51

編輯

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

問題描述

1 個解決方案

解決方案1 0 已采納 2015-05-28 02:06:51

編輯

解決方案1
0 已采納 2015-05-28 02:06:51