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