hls在HTML5頁面中進行播放

阿新 • • 發佈：2019-02-15

最近，m3u8視訊如何在HTML頁面上進行播放。找了半天都沒找到，花了一天時間將問題解決，為了方便別人，編寫了這篇日誌。實現html頁面下m3u8格式視訊的播放。

網上也有人說了，需要用到jwplayer。

網頁程式碼如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="apple-touch-icon" href="logo.png" />
<title>校園觀光車實景檢視</title>
<style type="text/css">
<!--
body {
    background-color:#680000;
    font-family: sans-serif;
    font-size: 0.9em;
}
.code {
    font-family: monospace;
    font-size: 130%;
}
a {
    color: red;
    background: white;
    text-decoration: none;
}
#information {
    padding-top: 1em;
    padding-bottom: 1em;
}
.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#fff}
.spiffy1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #b60600;
  border-right:1px solid #b60600;
  background:#df0b00}
.spiffy2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #8c0100;
  border-right:1px solid #8c0100;
  background:#e60c00}
.spiffy3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #e60c00;
  border-right:1px solid #e60c00;}
.spiffy4{
  border-left:1px solid #b60600;
  border-right:1px solid #b60600}
.spiffy5{
  border-left:1px solid #df0b00;
  border-right:1px solid #df0b00}
.spiffyfg{
    padding:1em;
    background-color:#fff;
}
  -->
</style>
</head>
<body>
<script type='text/javascript' src='jwplayer.js'></script>
<div>
  <b class="spiffy">
  <b class="spiffy1"><b></b></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy3"></b>
  <b class="spiffy4"></b>
  <b class="spiffy5"></b></b>
  
<div class="spiffyfg">

<p>通過這個網頁您就可以看到校園觀光車現在所處的位置，以及執行的情況也就是對校園車的行蹤能夠了如指掌，很好地解決了校車去哪兒的問題</p>

<center>
<b>可愛的校車</b>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': 'player.swf',
    'file': 'test',
    'streamer': 'rtmp://172.16.97.29:1935/hls',
    'controlbar': 'bottom',
    'width': '848',
    'height': '360'
  });
</script>
<br />

</center>

<br />
</div>

  <b class="spiffy">
  <b class="spiffy5"></b>
  <b class="spiffy4"></b>
  <b class="spiffy3"></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy1"><b></b></b></b>
</div>
</body>
</html>

核心程式碼

<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': 'player.swf',
    'file': 'test',
    'streamer': 'rtmp://172.16.97.29:1935/hls',
    'controlbar': 'bottom',
    'width': '848',
    'height': '360'
  });
</script>

解釋：

執行轉碼的命令如下：

ffmpeg -i rtsp://admin:[email protected] -vcodec copy -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 -f flv rtmp://172.16.97.29:1935/hls/test

注意：名稱為test

不能夠寫成了：test.m3u8

路徑：rtmp://172.16.97.29:1935/hls

不能夠寫成了：rtmp://172.16.97.29:1935/hls/test

需要的js等檔案，大家可以到我的資源裡面看，有一個相關的例項。

執行效果如下

如果本文章對您有幫助，感謝您的支援！

hls在HTML5頁面中進行播放

最近，m3u8視訊如何在HTML頁面上進行播放。找了半天都沒找到，花了一天時間將問題解決，為了方便別人，編寫了這篇日誌。實現html頁面下m3u8格式視訊的播放。網上也有人說了，需要用到jwplayer。網頁程式碼如下。 <!DOCTYPE html PUBLIC

如何使用Web3.js API 在頁面中進行轉賬

寫在前面閱讀本文前，你應該對以太坊、智慧合約、錢包的概念有所瞭解，如果你還不瞭解，建議你先看以太坊是什麼除此之外，你最好還了解一些HTML及JavaScript知識。轉賬UI 頁面的編寫轉賬UI主體的介面如圖：實現這個介面

使用Web3.js API 在頁面中進行轉賬

閱讀本文前，你應該對以太坊、智慧合約、錢包的概念有所瞭解，如果你還不瞭解，建議你先看以太坊是什麼除此之外，你最好還了解一些HTML及JavaScript知識。轉賬UI 頁面的編寫轉賬UI主體的介面如圖：實現這個介面很簡單，這裡就不程式碼了。大家可以開啟Demo，右擊檢視頁面原始碼。

關於BigDecimal型別在jsp頁面中進行除法運算問題

問題描述：在專案編寫過程中，發現BigDecimal在jsp中進行除法運算時，會有如下問題：假設頁面中存在一個BigDecimal payment.unPayAmount = new BigDecimal(1015228)。由於資料庫儲存的金額是以分為單

廣播中進行Activity頁面跳轉時出現的錯誤

在廣播來啟動Activity的時候如果不設定intent的FLAG_ACTIVITY_NEW_TASK屬性，就會報這個異常： android.util.AndroidRuntimeException: Calling startActivity() from outside of an

頁面中全域性變數的更新（ajax也可以對全域性變數進行更新）

1 2 3 4 5 6 7 8 9 10 11 12 function checkoldpass($pass) { $.ajax({ &nb

頁面中H5的使用標籤如音訊播放器和視訊播放器

1.音訊播放器使用的標籤為： <audio src="音訊的地址" controls="controls" preload="auto" autoplay="autoplay" loop="loop"> 屬性中src 為音訊的地址路徑，loop 是迴圈播放，如

vue 父頁面中含子頁面滑動，滑動結束，底部元件進行滑動

詳見效果地址： https://pan.baidu.com/s/1Yin2q0Fh_6AQJTlbie7QMw 使用 1.v-touch 實現滑動效果，父級頁面滑動，當父級含有子頁面需要滑動功能hasClass("sm_img"），需要判斷是否繼續父級滑動，

使用springmvc從頁面中獲取資料，然後根據獲得的引數資訊進行修改，如果修改的資料中含有不是基本資料型別的引數。比如傳的引數中有Date型別的資料時，需要我們進行引數型別轉換。

1.1 需求　　在商品修改頁面可以修改商品的生產日期，並且根據業務需求自定義日期格式。 1.2 需求分析　　由於日期資料有很多格式，所以springmvc沒辦法把字串轉換成日期型別。所以需要自定義引數繫結。前端控制器接收到請求後，找到註解形式的處理器介面卡，對RequestMapping標記的方法進

在web頁面中播放rtsp直播資料流方法

WEB播放RTSP直播資料流方法在html技術中目前是無法直接使用現有的web技術進行播放rtsp直播資料流的，下面總結了可以是web播放rtsp直播流的方法。只是自己備用。 1，視訊播放功能使用的庫(WebChimera.js) 1.1，WebCh

iis配置站點，頁面中的video 視訊標籤載入的視訊無法播放或者無法載入的解決方法

症狀：頁面包含以下程式碼，無法看視訊（注：視訊已確認為瀏覽器支援格式） <span style="font-size:14px;"> <video controls="contro

SpringMVC中利用@InitBinder來對頁面資料進行解析繫結

在使用SpingMVC框架的專案中，經常會遇到頁面某些資料型別是Date、Integer、Double等的資料要繫結到控制器的實體，或者控制器需要接受這些資料，如果這類資料型別不做處理的話將無法繫結。解決方法：使用註解@InitBinder來解決這些問題，這樣

在servlet中獲取jsp頁面中選中的複選框的值，並對其值進行操作。

jsp部分程式碼:<input type="checkbox" name="checkboxs" value="${stuInfo.sid}"/>動態的為複選框賦值servlet程式碼：String[] ids = request.getParameterValu

iis配置站點，頁面中的video 視訊標籤載入的視訊無法播放或者無法載入的解決方法（轉載）

以這幾天部署網站到iis伺服器上，網站上有一個mp4格式的視訊，但是部署好之後，視訊播放不了。原因主要考慮以下幾方面：（1）考慮iis伺服器對相關視訊格式的限制症狀：頁面包含以下程式碼，無法看視訊（注：視訊已確認為瀏覽器支援格式）<spanstyle="font-siz

在JSP頁面中使用JAVAbean 並且傳值進行顯示

javabean package beans; public class Student { private String stuno; private String stuname; public String getStuno() { return stun

jsp頁面中，動態調用系統時間的實現

簡單 char ext fonts get har interval sso 星期在做WEB項目時，經常會須要在頁面中顯示當前時間，以下介紹一個簡單的調用系統時間的方法，效果如圖：在頁面中插入以下代碼即可了 <div id="time"&

點擊超鏈接，將頁面中某個數據傳到另一個頁面

get innerhtml ear click ber cap java != plain <input type="text" name="name"> <input type="text" name="age"> <a href="jav

gif圖再html網頁中只播放一次

ges http hot 技術分享 log .cn png web web前端 ui給的gif圖放在網頁上只播放一次，怎麽也找不出來解決辦法是不是感覺自己的技術不行了，就在此時此刻不要懷疑自己，堂堂的web前端工程師不要慫。聽我的首先打開Photoshop，然後把這個gi

html頁面中拍照和上傳照片那些事兒（二）

read itl 加載完成大小上傳照片那些事 cnblogs 設置新建本文為原創，轉載請註明出處： cnzt 文章：cnzt-p http://www.cnblogs.com/zt-blog/p/6895352.html 本文主要說下iOS上

筆記-返回到前一個頁面時顯示前一個頁面中ajax獲取的數據

最終 logs ajax請求嘗試但是 repl 拼接新聞筆記筆記第一部分：http://www.cnblogs.com/zczhangcui/p/6869219.html 在第一部分遇到的問題是，用ajax獲取了一系列列表信息後，拼接好html後插入到了原有頁面中

hls在HTML5頁面中進行播放

相關推薦