UNI-APP H5端 播放m3u8

这篇具有很好参考价值的文章主要介绍了UNI-APP H5端 播放m3u8。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp播放网络视频h5,uni-app,uni-app,音视频,html5

通过npm下载到项目的node-modules

npm  install video.js

首先,用上面的那个npm命令行下载video.js

然后,在项目中main.js中引入

package.json

"dependencies": {
    "core-js": "^2.6.5",
    "video.js": "^7.19.2",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10"
  }

main.js

import Vue from 'vue'
import App from './App.vue'
import Videojs from 'video.js'
import 'video.js/dist/video-js.min.css' 
Vue.prototype.$video = Videojs
 
new Vue({
  render: h => h(App),
}).$mount('#app')

页面.vue

 文章来源地址https://www.toymoban.com/news/detail-523043.html

<template>
	<div id="app">
		<div class="video-js" ref="videos" style="width: 100%;height: 100%;"></div>
	</div>
</template>
 
<script>
	export default {
		mounted() {
			let video = document.createElement('video');
			video.id = 'video';
			video.style = 'width: 100%; height: 100%;';
			video.controls = true;
			video.preload = "auto"
			video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
			video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放,也就是不是全zhi屏播放的video标签的一个属性
			video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
			let source = document.createElement('source');
			source.src =
				'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
			video.appendChild(source);
			// return
			this.$refs.videos.appendChild(video);
			let that = this;
			let player = this.$video('video', {
				poster: '', // 视频封面图地址
				title: '4564564',
				playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
				autoDisable: true,
				preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
				language: 'zh-CN',
				fluid: true, // 自适应宽高
				muted: false, //  是否静音
				aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
				controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
				autoplay: false, //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
				loop: true, // 导致视频一结束就重新开始。 视频播放结束后,是否循环播放
				screenshot: true,
				controlBar: {
					volumePanel: { //声音样式
						inline: false // 不使用水平方式
					},
					timeDivider: true, // 时间分割线
					durationDisplay: true, // 总时间
					progressControl: true, // 进度条
					remainingTimeDisplay: true, //当前以播放时间
					fullscreenToggle: true, //全屏按钮
					pictureInPictureToggle: true, //画中画
				}
			}, function() {
				this.on('error', function(err) { //请求数据时遇到错误
					console.log("请求数据时遇到错误", err)
				});
				this.on('stalled', function(stalled) { //网速失速
					console.log("网速失速", stalled)
				});
				// this.on('play', function() { //开始播放
				// 	console.log("开始播放")
				// });
				// this.on('pause', function() { //暂停
				// 	console.log("暂停")
				// });
				// this.on('timeupdate', function(timeupdate) {
				// 	// console.log(timeupdate)
				// })
			});
		}
	}
</script>
 
<style>
	#app {
		width: 100vw;
		height: 100vh;
	}
</style>

到了这里,关于UNI-APP H5端 播放m3u8的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目如何播放m3u8格式视频

    在node_modeols里面找到@easydarwin下的dist/compent/EasyPlayer-lib.min.js和EasyPlayer.wasm两个文件复制到pubilc目录下 引入 在components中 在模板中

    2024年02月15日
    浏览(53)
  • 安卓实现M3U8文件的下载和播放

    现如今网络上的视频大多数都是m3u8格式的,使用m3u8格式有以下好处 1. 方便切换码率,例如从高清转到蓝光 2. 节约流量,m3u8实际切割成一段段的TS后缀视频,传统请求是把整个文件流返回去,网络不好或者文件过大时,都会造成响应缓慢,m3u8则是返回一个个的ts文件,当前

    2023年04月20日
    浏览(56)
  • Unity WebGL 播放视频流m3u8

    目录 介绍 步骤 1.导入AVProVideo插件,创建场景,创建空物体添加MediaPlayer组件设置m3u8视频地址以及WebGL平台设置  2.在Canvas下创建Avpro Video,为MediaPlayer赋值  3.可以现在编辑器模式下测试视频地址是否可以播放,然后打包  4.打包完成后,将文件hls.min.js复制到Build文件夹下: 5

    2023年04月10日
    浏览(57)
  • android原生MediaPlayer播放本地的m3u8

    遇到某个需求,需要播放百度网盘的视频。但是通过百度网盘的sdk获取到的视频url是由若干个ts片段组成的m3u8播放源。然后把这个m3u8的播放源放在本地,也就是说m3u8是一个本地播放源。那么如何去播放呢?这边引进一个http轻量级的服务器NanoHttpd。 目前市场上流行的播放器,

    2024年02月06日
    浏览(50)
  • hls.js如何播放m3u8文件(实例)?

     HLS(HTTP Live Streaming)是一种视频流传输协议,是苹果推出的适用于iOS与macOS平台的流媒体传输协议。它将视频分割成若干个小段,每个小段大小一般为2~10秒不等,并通过HTTP协议进行传输。通过在每个小段之间插入若干秒的间隔,可以提高视频的传输稳定性和用户的观看体验

    2023年04月23日
    浏览(38)
  • vue3播放m3u8视频(videoJS)

    需要同时导入videoJS以及相关的CSS 以下时项目使用中自己封装的组件,用起来也很简单,需要的可以对照自取 UI框架为 ant-design-vue

    2024年02月03日
    浏览(41)
  • video插件播放m3u8格式视频(存原生)

    这里使用原生的javascript实现m3u8格式视频播放。 使用了包括video.min.js库和HLS插件。 在上面代码中,首先引入了video.min.js库和对应的播放器样式video-js.css,还引入了videojs-contrib-hls.min.js库(引入顺序考虑优先放到页面加载之前)。 之后,创建一个video标签,并指定source的src属性为

    2024年02月13日
    浏览(50)
  • vue项目中使用m3u8格式播放大视频

    网站中播放大视频时经常卡顿,无法顺利播放,在查找解决方案时发现很多文章建议使用m3u8流媒体播放代替MP4播放,做了下测试,现总结记录下测试过程中遇到的问题与解决办法。 1.使用ffmpeg做视频转换 1)下载ffmpeg  FFmpeg github 2)在环境变量path中加入配置,以便在控制台使

    2024年02月09日
    浏览(53)
  • 前端播放大视频卡顿的解决(m3u8视频流)

    最近在一个大屏看板项目中有一个需求是:要求视频和看板要进行来回切换。 最开始的做法是将MP4视频放在项目里,在本地运行时是没什么问题的,但是在往仓库里提交代码时出现了问题。当单个文件超过100MB时会导致代码提交失败; 后来的解决方案是将视频文件放到服务器

    2024年01月19日
    浏览(59)
  • 基于 Web 实现 m3u8 视频播放的简单应用示例

    将视频(MP4 等)转换为 M3U8 视频的服务,可以按照以下步骤进行操作: 将视频(MP4 等)转换为 M3U8:在服务中,使用适当的工具(如 FFmpeg)将接收到的视频(MP4 等)转换为 M3U8 格式。这将生成一个包含视频流的 M3U8 文件以及相应的分段(TS)文件。 提供边下边播服务:将生

    2024年02月07日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包