jsvideofullscreen

Ⅰ videojs如何在控制欄上增加一個按鈕

這是實現之後的效果

源碼：

//自定義控制條
var player = videojs(videoId,
{
"controls": true,
"autoplay": false,
"preload": "auto",
"loop": false,
controlBar:
{
captionsButton: false,
chaptersButton: false,
playbackRateMenuButton: true,
LiveDisplay: true,
subtitlesButton: false,
remainingTimeDisplay: true,
progressControl: true,
volumeMenuButton:
{
inline: false,
vertical: true
},
//豎著的音量條
fullscreenToggle: true
}
}, function () {

var newbtn = document.createElement('btn');
newbtn.innerHTML = '<button class="vjs-control" id="downloadButton"><i class="fa fa-expand" title="全屏"></i></button>' + '<button class="vjs-control" id="full_screen_button"><i class="fa fa-chrome" title="截圖"></i></button>' ;
var controlBar = document.getElementsByClassName('vjs-control-bar')[0];
insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];
controlBar.insertBefore(newbtn,insertBeforeNode);
player.src({ type : "rtmp/flv", src : r.roomLiveUri});
player.play();
});

裡面用到了一些前端框架的樣式，所以按鈕圖標你需要自己去找，參考的是這位大佬的博客：網頁鏈接

Ⅱ html5 video ie全屏

//模擬F11

function F11key(){

//判斷是否ie並進行相應的全屏

//requestFullScreen()

var navigatorName = "Microsoft Internet Explorer";

if( navigator.appName == navigatorName ){

//alert("ie")

var WsShell = new ActiveXObject('WScript.Shell')

WsShell.SendKeys('{F11}');

}else{

var de = document.documentElement;

if (de.requestFullscreen) {

de.requestFullscreen();

} else if (de.mozRequestFullScreen) {

de.mozRequestFullScreen();

} else if (de.webkitRequestFullScreen) {

de.webkitRequestFullScreen();

}else if (de.msRequestFullscreen) {

de.msRequestFullscreen();

}

//alert("not ie")

}

}

Ⅲ html里的js代碼，如何寫成一個JS文件，代碼如下：

把
<div id="video"><div id="a1"></div></div>
改為：
document.write('<div id=\"video\"><div id=\"a1\"><\/div><\/div>');
把上面修改後的這句和你的<script>標簽的內容拷貝到一個以.js結尾的文檔中(如video.js),<script>標簽文字不用拷貝到js文件里。

<script type="text/javascript" src="你的js地址(如:js/video.js),"></script>
原來的js和
<div id="video"><div id="a1"></div></div>
這句可以刪除。

Ⅳ video.js支持m3u8格式直播的實現示例

本文介紹了網頁設計中使用video.js支持m3u8格式直播的實現方法，通過詳盡的示例代碼，為學習和工作提供了有價值的參考。選擇video.js的原因包括PC端瀏覽器對m3u8格式視頻播放的支持不足，手機端瀏覽器界面風格差異大以及原生JS控制視頻兼容性差。利用video.js，不僅解決了這些技術難題，還能提供豐富且統一的視頻狀態介面，優化用戶體驗。

核心代碼示例展示了如何實現hls直播，感興趣的讀者可前往GitHub獲取源碼。在視頻狀態分析部分，列舉了多種事件，如rationchange、ended、firstplay、fullscreenchange、loadedalldata、loadeddata、loadedmetadata、loadstart、pause、play、progress、seeked、seeking、timeupdate和volumechange。同時，還探討了video載入優化技巧，即通過不初始化無用組件來提升載入速度。簡化配置代碼後，性能得到顯著提升。

文章還列舉了可能遇到的錯誤及其解決方法，例如，錯誤代碼4提示無法找到兼容的媒體源，解決方法是移除`data-setup="{}"`屬性。另一個錯誤為`TypeError: Cannot read property 'one' of undefined`，正確的初始化方式為確保`controlBar`配置對象結構正確，並正確調用`console.log(this)`以驗證`this`對象是否存在。

通過本文的指導，讀者可以深入了解並實踐如何在網頁設計中使用video.js高效支持m3u8格式直播，提升視頻播放功能的兼容性和用戶體驗。

Ⅳ 有支持M3U8格式的HTML5播放器嗎

有，而且也很多。
1.在目前支持較好的仍然是使用FlashPlayer來播放m3u8格式的視頻，這樣能夠很好的利用計算機的性能，使視頻質量達到最優良的效果，但不是h5。
2.H5支持的視頻格式，默認使用的是video標簽，但是video不支持m3u8格式，因此需要用到開源的js庫來解碼視頻流。
3.總結調研結果，推薦常用的有hls.js，video.js，都是開源免費。還有幾個需要注冊才能使用的，不羅列說明。
4.原生的標簽支持，目前無法實現，再瀏覽器的不斷更新迭代基礎上，未來是會支持的，不需要我們自己擴展。
5.除了3中說的幾個，還有很多瀏覽器插件支持的方式，比如vlc插件，就很好用。

總結，推薦在github上搜索hls.js，會發現很多可用的內容。

Ⅵ 網頁中視頻的引入

在網頁製作中，經常需要宣傳一些信息，這時候我們就需要使用到視頻，快捷醒目，簡單易懂。在頁面製作上可以有多種的實現方法，下面就來銷鎮介紹一下。

一、通過iframe來實現

width：視頻寬度

height：視頻高度

src：視頻路徑

allowfullscreen：允許全屏顯示

Iframe的使用比較簡單便捷，但是iframe也會引入廣告

二、H5視頻播放器

H5視頻播放器的用法和iframe相似

所謂的可選屬性即可以選擇性地填寫，也可不寫，包指斗帶含了一下幾個：

autoplay：視頻自動播放

controls：向用戶顯示控制項，可以控制視頻的播放暫停等

loop：循環播放

muted：靜音

poster="圖片路徑"：設置視頻海報封面

preload：判讀是否在頁面載入後載入視頻，auto(一旦頁面載入就開始載入視頻)/metadata(指示頁面載入後僅載入視頻的元數據)/none(面載入後不載入視頻)，如果設置了autoplay，就會忽略這個屬性唯蘆

注意：視頻設置寬高為100%，視頻的大小也不會填充整個頁面，我們給視頻<video>設置object-fit:fill;

三、使用視頻插件vue-video-player

1、首先需要安裝插件：

npm install vue-video-player –save

2、其次在main.js文件中引入：

import VueVideoPlayer from 'vue-video-player'

Vue.use(VueResource);

3、頁面上使用

options是vue-video-player的一些參數選項，我們主要設置了以下幾個：

poster：視頻播放前顯示的圖片

sources：視頻資源，包含了視頻的類型和路徑

language：與視頻匹配的語言，瀏覽器默認為en

muted：視頻靜音

相關的參數設置我們可以參考video.js文檔：http://docs.videojs.com/tutorial-options.html