videojs 播放 hls 流视频自动播放(autoplay + muted)

1.它没有之前 rtmp转流视频不能隐藏标签和离开页面会报错这个不会
2.自动播放无效解决 autoplay+autoplay

代码


<!DOCTYPE html>
<html lang="zh-CN">
<head>  <meta charset="UTF-8">  <title>demo</title>  <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet"><script src="https://vjs.zencdn.net/7.0.3/video.js"></script><style>.uls{display: flex;justify-content: space-around;flex-wrap: wrap;text-align: center}.lis{list-style-type: none;}</style>
</head><body><ul class="uls"><li class="lis"><h1>1</h1><!-- autoplay + muted 自动播放生效 --><video id="myVideo1" class="video-js vjs-default-skin vjs-big-play-centered" muted controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      <source id="source" src="http://yf.ugc.v.cztv.com/cztv/ugcvod/2018/04/14/A98CD7B26B06D94A5CEA56AA7D723572/h264_800k_mp4.mp4_playlist.m3u8"  type="application/x-mpegURL"><!-- <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">   --><!-- <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">     --></video> </li><li class="lis"><h1>2</h1><video id="myVideo2" class="video-js vjs-default-skin vjs-big-play-centered" muted controls autoplay  preload="auto" width="400" height="300" data-setup='{}'>      <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    </video>  </li><li class="lis"><h1>3</h1><video id="myVideo3" class="video-js vjs-default-skin vjs-big-play-centered"  controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />   </video> </li><li class="lis"><h1>4</h1><video id="myVideo4" class="video-js vjs-default-skin vjs-big-play-centered"  controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />  </video> </li><li class="lis"><h1>5</h1><video id="myVideo5" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    </video> </li><li class="lis"><h1>6</h1><video id="myVideo6" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    </video></li><li class="lis"><h1>7</h1><video id="myVideo7" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    </video></li><li class="lis"><h1>8</h1><video id="myVideo8" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    </video></li><li class="lis"><h1>9</h1><video id="myVideo9" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    </video></li><li class="lis"><h1>10</h1><button class="del" onclick="del(10)">销毁</button><video id="myVideo10" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="400" height="300" data-setup='{}'>      <source id="source" src="http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8"  type="application/x-mpegURL">    </video></li></ul>
</body>
</html>

效果图

videojs 播放 hls 流视频自动播放(autoplay + muted)相关推荐

微信H5同层播放器以及视频自动播放
iOS之前已经解决了视频播放默认全屏,且浮在页面最顶端的问题 playsinline webkit-playsinline 这样就可以在视频之上进行一些操作,实现诸如弹幕.自定义播放控件等的效果. 但 ...
android瀑布流视频自动播放,jquery实现的网页自动播放声音
jquery实现的网页自动播放声音复制代码代码如下: $(function(){ //这里参考了以下两个站点的介绍 //http://www.w3school.com.cn/html/html_a ...
vue中播放flv流视频
1.安装环境 npm install video.js npm install flv.js 2.引入video,在main.js中引入 import videojs from "video ...
音频视频自动播放解决方案
1.音频视频自动播放解决方案 1.1.使用背景公司项目需要用到音频自动播放的功能,首先想到的就是autoplay属性. 想让内容自动播放的最简单方法是将autoplay属性添加到元素,并将autop ...
在浏览器中使用VLC插件实现播放RTSP流视频
在浏览器中使用VLC插件实现播放RTSP流视频一.安装VLC插件二.编写测试html文件三.生成一个测试用RTSP流视频四.在浏览器中播放RTSP流视频五.VLC插件知识扩展 1.VLC插件 ...
H5Stream播放RTSP流视频
H5Stream入门级应用,播放RTSP流视频看到网上关于的H5Stream的资料比较少,故本文介绍了H5Stream的入门级使用教程,播放摄像头的RTSP视频流和和本地测试视频.包括H5Strea ...
html插入视频时不自动播放,html5中嵌入视频自动播放的问题解决
在h5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...
twitter全自动发推_如何阻止Twitter视频自动播放
twitter全自动发推 As you scroll through your Twitter Timeline, by default, videos will start autoplaying. ...
uniapp ----小程序上下滑动页面，视频自动播放（完整代码）
uniapp ----小程序上下滑动页面,视频自动播放(完整代码) <template><view class="box"><f-navbar tit ...

videojs 播放 hls 流视频自动播放(autoplay + muted)

代码

效果图

videojs 播放 hls 流视频自动播放(autoplay + muted)相关推荐

最新文章

热门文章

videojs 播放 hls 流视频 自动播放(autoplay + muted)

代码

效果图

videojs 播放 hls 流视频 自动播放(autoplay + muted)相关推荐

最新文章

热门文章

videojs 播放 hls 流视频自动播放(autoplay + muted)

videojs 播放 hls 流视频自动播放(autoplay + muted)相关推荐